当前位置：首页 > VUE

vue登录的实现过程

2026-02-22 02:37:57VUE

实现Vue登录功能

前端部分

vue登录的实现过程

创建登录表单组件 使用Vue的单文件组件（SFC）创建登录表单，包含用户名和密码输入框以及提交按钮。


<template>
<form @submit.prevent="handleSubmit">
 <input v-model="username" type="text" placeholder="用户名"/>
 <input v-model="password" type="password" placeholder="密码"/>
 <button type="submit">登录</button>
</form>
</template>

export default { data() { return { username: '', password: '' } }, methods: { async handleSubmit() { 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) } } } } ```

路由配置 在Vue Router中配置登录路由和受保护的路由。


const routes = [
{
 path: '/login',
 component: Login
},
{
 path: '/dashboard',
 component: Dashboard,
 meta: { requiresAuth: true }
}
]

router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!localStorage.getItem('token')) { next('/login') } else { next() } } else { next() } })

vue登录的实现过程


后端部分

1. 创建登录API接口
使用Node.js Express创建登录接口。
```javascript
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: '1h' })
    res.json({ token })
  } else {
    res.status(401).json({ error: '用户名或密码错误' })
  }
})

验证Token中间件 创建验证JWT的中间件用于保护API。


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, 'secret_key', (err, user) => { if (err) return res.sendStatus(403) req.user = user next() }) }



安全注意事项

1. 使用HTTPS协议传输数据
2. 密码应在前端进行哈希处理
3. 设置合理的Token过期时间
4. 实现CSRF保护机制
5. 限制登录尝试次数防止暴力破解

扩展功能

1. 添加记住我功能
2. 实现第三方登录（OAuth）
3. 添加验证码防止机器人攻击
4. 实现密码重置功能
5. 添加双因素认证