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:"1",
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:"0",
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.         if(res.status == "0"){
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:"0",
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.         if(res.status== "0"){
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. }