Vue+Node實(shí)現(xiàn)的商城用戶管理功能示例
本文實(shí)例講述了Vue+Node實(shí)現(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:'用戶名或密碼錯(cuò)誤!' }); } } }) });
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判斷是否等于或包含允許的訪問路徑,用戶在未登錄時(shí)可以訪問登陸頁面與商品列表頁面。如果訪問其他路徑則返回錯(cuò)誤信息“用戶未登錄”:
//全局?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、校驗(yàn)登陸
在頁面加載完成后,需要判斷用戶是否已經(jīng)登陸過了,前端向后端發(fā)出checkLogin的請求,后端根據(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信息去除,即在后臺將用戶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è)計(jì)有所幫助。
- node和vue實(shí)現(xiàn)商城用戶地址模塊
- 詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶頭像上傳)
- node+vue實(shí)現(xiàn)用戶注冊和頭像上傳的實(shí)例代碼
- Node.js+Express+MySql實(shí)現(xiàn)用戶登錄注冊功能
- nodejs acl的用戶權(quán)限管理詳解
- node.js+jQuery實(shí)現(xiàn)用戶登錄注冊AJAX交互
- 快速搭建Node.js(Express)用戶注冊、登錄以及授權(quán)的方法
- nodejs實(shí)現(xiàn)用戶登錄路由功能
- nodejs中實(shí)現(xiàn)用戶注冊路由功能
- 初學(xué)node.js中實(shí)現(xiàn)刪除用戶路由
相關(guān)文章
Node.js如何自動(dòng)審核團(tuán)隊(duì)的代碼
在項(xiàng)目開發(fā)中,統(tǒng)一團(tuán)隊(duì)的代碼風(fēng)格很重要,本文介紹如何用Node.js來自動(dòng)審核,來提高您的開發(fā)速度。2016-07-07nestjs搭建HTTP與WebSocket服務(wù)詳細(xì)過程
這篇文章主要介紹了nestjs搭建HTTP與WebSocket服務(wù)詳細(xì)過程的相關(guān)資料,需要的朋友可以參考下2022-11-11如何自動(dòng)化部署項(xiàng)目?折騰服務(wù)器之旅~
這篇文章主要介紹了自動(dòng)化部署項(xiàng)目,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Node.js靜態(tài)文件服務(wù)器改進(jìn)版
這篇文章主要介紹了Node.js靜態(tài)文件服務(wù)器改進(jìn)版的相關(guān)資料,需要的朋友可以參考下2016-01-01深入解析桶排序算法及Node.js上JavaScript的代碼實(shí)現(xiàn)
桶排序Radix Sort算法利用分治思想將元素分入各桶中排序后匯總,以下我們就來深入解析桶排序算法及Node.js上JavaScript的代碼實(shí)現(xiàn),需要的朋友可以參考下2016-07-07使用Node.js創(chuàng)建本地HTTP服務(wù)器并實(shí)現(xiàn)異地遠(yuǎn)程訪問的方法
Node.js 是能夠在服務(wù)器端運(yùn)行 JavaScript 的開放源代碼、跨平臺運(yùn)行環(huán)境,這篇文章主要介紹了如何使用Node.js快速創(chuàng)建本地HTTP服務(wù)器并實(shí)現(xiàn)異地遠(yuǎn)程訪問,需要的朋友可以參考下2024-01-01