功能1:用户未登录的情况下,无法进行加入购物车,无法进行相关操作
功能2:登陆过后,刷新页面,还能保持登陆信息。添加登陆校验,即通过访问cookie,获取userName和userId。
全局拦截,在server/app.js中添加白名单,登陆登出不拦截,获取商品列表不拦截
app.use(function (req,res,next){
if(req.cookies.userId){ // 判断是否登陆
next(); // 继续往后走,用户已经登陆,不拦截
}else{
// 定义白名单,即什么不拦截,req.originalUrl.indexOf('/goods/list')>-1可以换成=》req.path=='/goods/list'
console.log(`path:${req.path},originalUrl:${req.originalUrl}`);
if(req.originalUrl=='/users/login' || req.originalUrl=='/users/logout' || req.originalUrl.indexOf('/goods/list')>-1){
next(); // 如果点击的是登陆或登出,则不拦截它
}else{
// 未登录时,点击未加入白名单的按钮,会返回未登录提示信息
res.json({
status:'10001',
msg:'当前未登录',
result:''
});
}
}
})
登陆校验,server/routes/users.js中添加登陆校验接口
// 登陆校验接口
router.get('/checkLogin', function (req,res,next) {
if(req.cookies.userId){
res.json({
status:'0',
msg:'',
result:req.cookies.userName || '' // 第一次没有登陆的情况不存在userName故返回空
});
}else{
res.json({
status:'1',
msg:'未登录',
result:''
});
}
})
// 前端,添加登陆校验方法
mounted(){
this.checkLogin();
},
methods:{
checkLogin(){
axios.get('/users/checkLogin').then((response)=>{
let res = response.data;
if(res.status == '0'){
this.nickName = res.result;
}
});
}
}
网友评论