Vue+Node实现的商城用户管理功能示例
122 浏览量
2020-12-23
07:51:19
上传
评论
收藏 47KB PDF 举报
Vue+Node实现的商城用户管理功能示例实现的商城用户管理功能示例
本文实例讲述了Vue+Node实现的商城用户管理功能。分享给大家供大家参考，具体如下：
1、用户登陆、用户登陆
前端将用户输入的用户名密码post发送到后端，如果返回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;
}
})
}
},
后端根据前端传来的用户名、密码在数据库中查找指定条目，查询成功返回status=0，并设置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){
//登陆成功后设置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、服务器、服务器Express全局拦截全局拦截
一些内容在用户未登录是无法访问的，需要服务器对非法请求进行拦截。在nodejs中请求先到达app.js文件，然后再转发到指
定路由。在转发之前，可以先对用户登陆状态进行判断，如果cookies中有设置userId，表明已登陆，执行下一步next()。如果
未登录，只可以访问指定的路由路径，由req.originalUrl判断是否等于或包含允许的访问路径，用户在未登录时可以访问登陆
评论0