vue登录如何实现
Vue 登录功能实现
前端部分（Vue.js）
1. 创建登录表单组件
<template>
<div>
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await this.$axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
console.error('登录失败:', error)
}
}
}
}
</script>2. 配置axios拦截器 在main.js或单独的文件中配置axios拦截器，用于自动添加token到请求头：
import axios from 'axios'
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
Vue.prototype.$axios = axios后端部分（Node.js示例）
1. 创建登录路由
const express = require('express')
const jwt = require('jsonwebtoken')
const router = express.Router()
router.post('/login', (req, res) => {
const { username, password } = req.body
// 实际项目中这里应该查询数据库验证用户
if (username === 'admin' && password === '123456') {
const token = jwt.sign({ username }, 'your-secret-key', { expiresIn: '1h' })
res.json({ token })
} else {
res.status(401).json({ error: '用户名或密码错误' })
}
})2. 创建验证中间件
function authenticateToken(req, res, next) {
const authHeader = req.headers['authorization']
const token = authHeader && authHeader.split(' ')[1]
if (!token) return res.sendStatus(401)
jwt.verify(token, 'your-secret-key', (err, user) => {
if (err) return res.sendStatus(403)
req.user = user
next()
})
}安全增强措施
1. 使用HTTPS 确保所有登录请求通过HTTPS传输，防止敏感信息被窃取。
2. 实现CSRF防护 可以添加CSRF token到表单中，后端验证该token的有效性。
3. 密码加密存储 后端存储密码时应使用bcrypt等库进行哈希处理，不要明文存储。
4. 速率限制 对登录接口实施速率限制，防止暴力破解攻击。
5. 会话管理 设置合理的token过期时间，实现token刷新机制。
测试与调试
1. 测试登录流程 使用不同测试用例验证登录功能，包括正确凭据、错误凭据、空输入等情况。
2. 检查网络请求 通过浏览器开发者工具检查登录请求和响应，确保数据格式正确。
3. 验证token存储 登录后检查localStorage中token是否正确存储，后续请求是否自动携带token。
