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 或 sessionStoragelocalStorage.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.compare(password, user.password, (err, isMatch) => {if (err || !isMatch) {return res.status(401).json({ message: '密码错误' });}// 创建 JWT tokenconst 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');  // 删除 tokenthis.$router.push('/login');  // 跳转到登录页面
}

总结流程：

1. 用户在登录页输入用户名和密码。
2. 前端发送 POST 请求到后端，携带用户名和密码。
3. 后端验证用户信息，生成并返回 JWT Token。
4. 前端保存 token，并跳转到受保护页面。
5. 在后续的 API 请求中，前端将 token 附加在请求头部。
6. 用户登出时，删除 token 并跳转到登录页面。