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


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁(yè)面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打開(kāi)原生自帶讀寫(xiě)NTFS功能(圖文
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10C#中split用法實(shí)例總結(jié)
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置
- 04-02jquery與jsp,用jquery