Vue项目登录的基本流程

Vue 用户登录的基本流程包括以下6个步骤：

步骤： 1. 创建登录表单

在前端，首先要创建一个登录表单，用户输入账号（用户名、邮箱、手机号等）和密码。

示例：Login.vue

<template> <div> <form @submit.prevent="handleLogin"> <div> <label for="username">用户名</label> <input type="text" id="username" v-model="username" placeholder="请输入用户名" /> </div> <div> <label for="password">密码</label> <input type="password" id="password" v-model="password" placeholder="请输入密码" /> </div> <button type="submit">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' }; }, methods: { handleLogin() { const userData = { username: this.username, password: this.password }; this.$axios.post('/api/user/login', userData) .then(response => { if (response.data.status === 'success') { // 登录成功，保存 token 到 localStorage 或 sessionStorage localStorage.setItem('authToken', response.data.token); this.$router.push('/admin'); // 跳转到管理页面 } else { this.$message.error(response.data.message); // 显示错误信息 } }) .catch(error => { this.$message.error('登录失败，请重试'); }); } } }; </script> 2. 发送登录请求到后端

在 handleLogin 方法中，使用 axios 发送 POST 请求到后端 API /api/user/login，并携带用户输入的用户名和密码。

示例：后端登录接口（Node.js + Express）

app.post('/api/user/login', (req, res) => { const { username, password } = req.body; // 查找用户 let query = ''; let params = []; // 判断用户名是邮箱、电话还是普通用户名 if (emailRegex.test(username)) { query = 'SELECT * FROM users WHERE email = ?'; params = [username]; } else if (phoneRegex.test(username)) { query = 'SELECT * FROM users WHERE phone = ?'; params = [username]; } else { query = 'SELECT * FROM users WHERE username = ?'; params = [username]; } db.query(query, params, (err, results) => { if (err) { return res.status(500).json({ message: '数据库错误' }); } if (results.length === 0) { return res.status(404).json({ message: '用户不存在' }); } const user = results[0]; // 验证密码 bcrypt pare(password, user.password, (err, isMatch) => { if (err || !isMatch) { return res.status(401).json({ message: '密码错误' }); } // 创建 JWT token const token = jwt.sign({ id: user.id, username: user.username }, secretKey, { expiresIn: '1h' }); res.status(200).json({ status: 'success', message: '登录成功', token: token // 将 token 返回给前端 }); }); }); }); 3. 保存 Token

在用户登录成功后，后端会返回一个 JWT（JSON Web Token）。前端接收到这个 token 后，需要将它存储到浏览器的 localStorage 或 sessionStorage 中，以便后续的请求使用。

localStorage.setItem('authToken', response.data.token); 4. 进行路由保护

登录后，前端应该根据 token 来判断用户是否已认证。在每个需要认证的路由（例如管理页面）中，使用路由守卫进行验证。

示例：路由守卫

const router = new VueRouter({ routes: [ { path: '/admin', component: AdminPage, beforeEnter: (to, from, next) => { const token = localStorage.getItem('authToken'); if (token) { next(); // 已登录，继续访问 } else { next('/login'); // 未登录，重定向到登录页 } } }, { path: '/login', component: LoginPage } ] }); 5. 发起受保护请求

在后续的 API 请求中，前端会把保存的 token 附加到请求头部，发送给后端验证。

示例：发起受保护的 API 请求

this.$axios.get('/api/protected/resource', { headers: { Authorization: `Bearer ${localStorage.getItem('authToken')}` } }) .then(response => { console.log('Protected data:', response.data); }) .catch(error => { console.error('Error:', error.response); }); 6. 登出功能

用户登出时，前端需要删除存储的 token，并跳转到登录页面。

示例：登出功能

logout() { localStorage.removeItem('authToken'); // 删除 token this.$router.push('/login'); // 跳转到登录页面 } 总结流程： 用户在登录页输入用户名和密码。前端发送 POST 请求到后端，携带用户名和密码。后端验证用户信息，生成并返回 JWT Token。前端保存 token，并跳转到受保护页面。在后续的 API 请求中，前端将 token 附加在请求头部。用户登出时，删除 token 并跳转到登录页面。