vue商城登录实现
实现 Vue 商城登录功能
前端部分
创建登录组件
在 src/views 目录下创建 Login.vue 文件，包含表单和基础样式：
<template>
<div class="login-container">
<form @submit.prevent="handleSubmit">
<input v-model="form.username" placeholder="用户名"/>
<input v-model="form.password" type="password" placeholder="密码"/>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
async handleSubmit() {
try {
const res = await this.$axios.post('/api/login', this.form)
localStorage.setItem('token', res.data.token)
this.$router.push('/')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>配置路由
在 src/router/index.js 中添加登录路由：
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
}axios 拦截器
在 src/utils/request.js 中配置请求拦截：
import axios from 'axios'
const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL
})
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
export default instance后端部分
Node.js 示例 创建基础登录接口：
const express = require('express')
const jwt = require('jsonwebtoken')
const app = express()
app.post('/api/login', (req, res) => {
const { username, password } = req.body
// 实际项目应查询数据库验证
if (username === 'admin' && password === '123456') {
const token = jwt.sign({ username }, 'secret_key', { expiresIn: '2h' })
res.json({ token })
} else {
res.status(401).json({ error: '认证失败' })
}
})安全增强
前端验证 在提交前增加基础验证：
validateForm() {
if (!this.form.username.trim()) {
alert('请输入用户名')
return false
}
if (this.form.password.length < 6) {
alert('密码至少6位')
return false
}
return true
}后端防护
- 使用 bcrypt 加密存储密码
- 实现限流防止暴力破解
- 设置 HTTPS 安全传输
状态管理
Vuex 集成
在 src/store 中管理登录状态：
const store = new Vuex.Store({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user
}
}
})登录成功后更新状态：
this.$store.commit('setUser', res.data.user)
