Vue+Node實現(xiàn)的商城用戶管理功能示例
本文實例講述了Vue+Node實現(xiàn)的商城用戶管理功能。分享給大家供大家參考,具體如下:
1、用戶登陸
前端將用戶輸入的用戶名密碼post發(fā)送到后端,如果返回status=0,代表登陸成功,將hasLogin置為true,控制頁面登陸按鈕不顯示,并顯示返回的用戶名nickname
login(){ if(!this.username||!this.password){ this.errMsg="請輸入用戶名與密碼!"; this.errShow=true; }else{ axios.post('/users/login',{ username:this.username, password:this.password }).then((response,err)=>{ let res=response.data; if(res.status===0){ this.hasLogin=true; this.nickname=res.result; this.closeLogin(); }else{ this.errShow=true; this.errMsg=res.msg; } }) } },
后端根據(jù)前端傳來的用戶名、密碼在數(shù)據(jù)庫中查找指定條目,查詢成功返回status=0,并設(shè)置res的cookie保存用戶名與Id
router.post('/login', function(req, res, next) { let username=req.body.username; let password=req.body.password; let params={ userName:username, userPwd:password }; user.findOne(params,(err,userDoc)=>{ "use strict"; if(err){ res.json({ status:1, msg:err.message }) }else { if(userDoc){ //登陸成功后設(shè)置res.cookie與req.session res.cookie('userId',userDoc.userId,{ maxAge:1000*60*60 }); res.cookie('userName',userDoc.userName,{ maxAge:1000*60*60 }); res.json({ status:0, msg:'登陸成功', result:userDoc.userName }); }else{ res.json({ status:1, msg:'用戶名或密碼錯誤!' }); } } }) });
2、服務(wù)器Express全局?jǐn)r截
一些內(nèi)容在用戶未登錄是無法訪問的,需要服務(wù)器對非法請求進(jìn)行攔截。在nodejs中請求先到達(dá)app.js文件,然后再轉(zhuǎn)發(fā)到指定路由。在轉(zhuǎn)發(fā)之前,可以先對用戶登陸狀態(tài)進(jìn)行判斷,如果cookies中有設(shè)置userId,表明已登陸,執(zhí)行下一步next()。如果未登錄,只可以訪問指定的路由路徑,由req.originalUrl判斷是否等于或包含允許的訪問路徑,用戶在未登錄時可以訪問登陸頁面與商品列表頁面。如果訪問其他路徑則返回錯誤信息“用戶未登錄”:
//全局?jǐn)r截 app.use(function (req,res,next) { if(req.cookies.userId) next(); //已登陸 //未登錄,只能訪問登錄與商品頁面 else if(req.originalUrl==='/users/login'||req.originalUrl.indexOf('/goods')>-1) next(); else{ res.json({ status:3, msg:'用戶未登錄' }) } });
//路由跳轉(zhuǎn) app.use('/', index); app.use('/users', users); app.use('/goods', goods);
3、校驗登陸
在頁面加載完成后,需要判斷用戶是否已經(jīng)登陸過了,前端向后端發(fā)出checkLogin的請求,后端根據(jù)cookie中的userId是否設(shè)置,返回判斷信息,如果登陸則不需要用戶再次手動登陸了
router.get('/checkLogin',(req,res)=>{ "use strict"; if(req.cookies.userId){ //設(shè)置了cookie,用戶已登陸 res.json({ status:0, msg:"登錄成功", username:req.cookies.userName }) }else { res.json({ status:3, msg: "未登錄" }) } });
4、登出
用戶的登出操作就是將cookie信息去除,即在后臺將用戶cookie的有效期置為0
router.get('/logout',(req,res)=>{ "use strict"; res.cookie('userId','',{maxAge:0}); res.cookie('userName','',{maxAge:0}); res.json({ status:0, msg:'登出成功!' }) });
希望本文所述對大家node.js程序設(shè)計有所幫助。
上一篇:ES6常用小技巧總結(jié)【去重、交換、合并、反轉(zhuǎn)、迭代、計算等】
欄 目:JavaScript
下一篇:vue中根據(jù)時間戳判斷對應(yīng)的時間(今天 昨天 前天)
本文標(biāo)題:Vue+Node實現(xiàn)的商城用戶管理功能示例
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9440.html
您可能感興趣的文章
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript點線,點線的代碼
- 04-02javascript替換字符串,js字符串的替換
- 04-02包含javascript舍的詞條
- 04-02javascript前身,javascript的前身
- 04-02java吃豆人代碼 js吃豆人
- 04-02java代碼的文件格式 java代碼的文件格式怎么寫
- 04-02java后端代碼分頁 java后端實現(xiàn)分頁page
- 01-10使用webpack/gulp構(gòu)建TypeScript項目的方法示例
- 01-10Echarts實現(xiàn)單條折線可拖拽效果


閱讀排行
本欄相關(guān)
- 04-02javascript點線,點線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報,JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10C#中split用法實例總結(jié)
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 01-11ajax實現(xiàn)頁面的局部加載
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 04-02jquery與jsp,用jquery