网站空间 上传程序,专业室内设计 官网,济南网站排名推广,自主研发app大概要多少钱Vue 用户登录的基本流程包括以下6个步骤#xff1a;
步骤#xff1a;
1. 创建登录表单
在前端#xff0c;首先要创建一个登录表单#xff0c;用户输入账号#xff08;用户名、邮箱、手机号等#xff09;和密码。
示例#xff1a;Login.vue
templatediv…Vue 用户登录的基本流程包括以下6个步骤
步骤
1. 创建登录表单
在前端首先要创建一个登录表单用户输入账号用户名、邮箱、手机号等和密码。
示例Login.vue
templatedivform submit.preventhandleLogindivlabel forusername用户名/labelinput typetext idusername v-modelusername placeholder请输入用户名 //divdivlabel forpassword密码/labelinput typepassword idpassword v-modelpassword placeholder请输入密码 //divbutton typesubmit登录/button/form/div
/templatescript
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(登录失败请重试);});}}
};
/script2. 发送登录请求到后端
在 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
在用户登录成功后后端会返回一个 JWTJSON 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); // 跳转到登录页面
}总结流程
用户在登录页输入用户名和密码。前端发送 POST 请求到后端携带用户名和密码。后端验证用户信息生成并返回 JWT Token。前端保存 token并跳转到受保护页面。在后续的 API 请求中前端将 token 附加在请求头部。用户登出时删除 token 并跳转到登录页面。
