vue登录逻辑的实现
登录逻辑实现步骤
前端部分（Vue.js）
- 创建登录表单组件 在Vue组件中构建包含用户名和密码输入框的表单，绑定数据模型。
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名">
<input v-model="password" type="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
}
}
</script>- 添加表单验证 使用Vuelidate或手动验证确保输入符合要求。
methods: {
validateForm() {
return this.username.length > 0 && this.password.length >= 6
}
}- 发送登录请求 通过axios向后台API发送认证请求，处理响应。
methods: {
async handleLogin() {
if (!this.validateForm()) return
try {
const response = await 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)
}
}
}后端部分（Node.js示例）
- 创建登录API端点 接收前端发送的凭证并进行验证。
router.post('/api/login', async (req, res) => {
const { username, password } = req.body
const user = await User.findOne({ where: { username } })
if (!user) return res.status(401).send('用户不存在')
const isValid = await bcrypt.compare(password, user.password)
if (!isValid) return res.status(401).send('密码错误')
const token = jwt.sign({ userId: user.id }, 'SECRET_KEY', { expiresIn: '24h' })
res.json({ token })
})- 实现密码加密 使用bcrypt对密码进行哈希处理。
const saltRounds = 10
const hashedPassword = await bcrypt.hash(password, saltRounds)安全增强措施
-
使用HTTPS 确保所有通信通过加密通道传输。
-
设置HTTP-only Cookie 替代localStorage存储token更安全。
res.cookie('token', token, { httpOnly: true, secure: true })-
实现CSRF保护 添加CSRF令牌防止跨站请求伪造。
-
速率限制 防止暴力破解攻击。
const rateLimit = require('express-rate-limit')
const limiter = rateLimit({
windowMs: 15 * 60 * 1000,
max: 5
})
app.use('/api/login', limiter)前端路由守卫
- 配置全局前置守卫 保护需要认证的路由。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})- 路由元字段定义 标记需要认证的路由。
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}错误处理
- 显示友好错误信息 在前端展示后端返回的错误。
catch (error) {
this.errorMessage = error.response?.data?.message || '登录失败'
}- 实现自动重试 对网络错误进行有限次数的重试。
会话管理
-
实现token刷新 使用refresh token延长会话。
-
添加注销功能 清除存储的认证信息。
methods: {
logout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}
