Vue nodejs商城项目-登录模块

一、登录功能

后端server/routes/users.js

1. var User = require('./../models/users.js');
2.  
3. // 二级路由
4. // 登录接口
5. router.post("/login",function(req, res, next){
6.     // 获取参数
7.     var param = {
8.         userName:req.body.userName,
9.         userPwd:req.body.userPwd
10.     }
11.     User.findOne(param, function(err,doc){ // 根据用户名密码查找数据库
12.         if(err){
13.             res.json({
14.                 status:"",
15.                 msg:err.message
16.             })
17.         }else{
18.             if(doc){
19.                 res.cookie("userId",doc.userId,{
20.                     path:'/',
21.                     maxAge:100*60*60
22.                 });
23.                 // res.cookie("userName",doc.userName,{
24.                 // path:'/',
25.                 // maxAge:1000*60*60
26.                 // });
27.                 // req.session.user = doc;
28.                 res.json({
29.                     status:"",
30.                     msg:'',
31.                     result:{
32.                         userName:doc.userName
33.                     }
34.                 })
35.             }
36.         }
37.     })
38. })

添加代理config/index.js

1. proxyTable: {
2.     '/users/*':{ // users/路由的下一级路由
3.         target:'http://localhost:3000'
4.     }
5. },
6.  
7. 说明：如果是有三级路由，例'/users/cart/del'，需要配置'/users/**';否则请求时会出现404错误。

前端NavHeader.vue

1. methods:{
2.     login(){ // 点击登录
3.       console.log("userName:"+this.userName)
4.       if(!this.userName || !this.userPwd){
5.         this.errorTip = true;
6.         return
7.       }
8.       axios.post("/users/login",{
9.         userName:this.userName,
10.         userPwd:this.userPwd
11.       }).then((response)=>{
12.         let res = response.data;
13.         "){
14.           this.errorTip = false;
15.           this.loginModalFlag = false;
16.           this.nickName = res.result.userName;
17.         }else{
18.           this.errorTip = true;
19.         }
20.       })
21.     }
22. }

二、登出功能

后端server/routes/users.j

1. / 登出接口
2. router.post("/logout",function(req,res,next){
3.     res.cookie("userId","",{
4.         path:"/",
5.         maxAge:-1 // 生命周期
6.     })
7.     res.json({
8.         status:"",
9.         msg:'',
10.         result:''
11.     })
12. })

前端NavHeader.vue

1. methods:{
2.     logOut(){ // 点击logout登出
3.       axios.post("/users/logout").then((response)=>{
4.         let res = response.data;
5.         "){
6.           this.nickName = '';
7.         }
8.       })
9.     }
10. }

三、登录拦截功能

server/app.js

1. // 捕获登录状态
2. app.use(function(req,res,next){ // 进入路由之前优先进入function
3.     if(req.cookies.userId){ // 有cookies,说明已经登录
4.         next();
5.     }else{
6.         console.log("url:"+req.originalUrl);
7.         if(req.originalUrl =='/users/login' || req.originalUrl == '/users/logout' || req.originalUrl == '/goods/list'){ // 未登录时可以点击登录login登出logout和查看商品列表
8.             next();
9.         }else{
10.             res.json({
11.                 status:'1001',
12.                 msg:'当前未登录',
13.                 result:''
14.             })
15.         }
16.     }
17. })

四、校验登录

server/routes/users.js

1. 登录接口添加userName的cookie
2. res.cookie("userName",doc.userName,{
3.     path:'/',
4.     maxAge:1000*60*60
5. });
6.  
7. // 校验是否登录
8. router.get("/checkLogin",function(req,res,next){
9.     if(req.cookies.userId){
10.         res.json({
11.             status:'0',
12.             msg:'',
13.             result:req.cookies.userName || ''
14.         });
15.     }else{
16.         res.json({
17.             status:'1',
18.             msg:'未登录',
19.             result:''
20.         })
21.     }
22. })

src/components/NavHeader.vue

1. mounted(){
2.     this.checkLogin();
3. },
4. methods:{
5.     checkLogin(){ // 检查是否登录
6.       axios.get("/users/checkLogin").then((response)=>{
7.         let res = response.data;
8.         if(res.status == '0'){
9.           this.nickName = res.result;
10.         }
11.       })
12.     }
13. }