Vue+Node实现的商城用户管理功能示例

 更新时间:2019年12月23日 08:41:08   作者:theVicTory  
这篇文章主要介绍了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判断是否等于或包含允许的访问路径,用户在未登录时可以访问登陆页面与商品列表页面。如果访问其他路径则返回错误信息“用户未登录”:

//全局拦截
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:'用户未登录'
  })
 }
});

//路由跳转
app.use('/', index);
app.use('/users', users);
app.use('/goods', goods);

3、校验登陆

在页面加载完成后,需要判断用户是否已经登陆过了,前端向后端发出checkLogin的请求,后端根据cookie中的userId是否设置,返回判断信息,如果登陆则不需要用户再次手动登陆了

router.get('/checkLogin',(req,res)=>{
 "use strict";
 if(req.cookies.userId){      //设置了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程序设计有所帮助。

相关文章

  • 初学者如何快速搭建Express开发系统步骤详解

    初学者如何快速搭建Express开发系统步骤详解

    这篇文章主要介绍了初学者如何快速搭建Express开发系统,结合实例形式详细分析了express框架搭建的具体步骤与相关注意事项,需要的朋友可以参考下
    2023-05-05
  • express框架,报错:“Cannot set headers after they are sent to the client”,解决方法总结

    express框架,报错:“Cannot set headers after t

    这篇文章主要介绍了express框架,报错:“Cannot set headers after they are sent to the client”,解决方法,结合实例形式总结分析了常见的问题原因与对应的解决方案,需要的朋友可以参考下
    2023-05-05
  • npm安装依赖报错ERESOLVE unable to resolve dependency tree的解决方法

    npm安装依赖报错ERESOLVE unable to resolve dependency tree的解决方

    当我们拿到一个前端项目的时候,想要把它运行起来,首先是要给它安装依赖,下面这篇文章主要给大家介绍了关于npm安装依赖报错ERESOLVE unable to resolve dependency tree的解决方法,需要的朋友可以参考下
    2023-04-04
  • NodeJS 创建目录和文件的方法实例分析

    NodeJS 创建目录和文件的方法实例分析

    这篇文章主要介绍了NodeJS 创建目录和文件的方法,涉及node.js中fs模块mkdir、writeFile及目录判断existsSync等方法的功能与相关使用技巧,需要的朋友可以参考下
    2023-04-04
  • 在Node.js中执行解压缩文件操作方法

    在Node.js中执行解压缩文件操作方法

    本文主要介绍了如何在Node.js中进行解压缩文件操作,本文也提供了压缩文件的方法,压缩文件的文件路径需要对应自己要压缩的文件夹路径,通过本文的介绍,可以帮助读者更好地理解和使用Node.js进行解压缩文件操作
    2024-10-10
  • Nodejs进阶:核心模块net入门学习与实例讲解

    Nodejs进阶:核心模块net入门学习与实例讲解

    本篇文章主要是介绍了Nodejs之NET模块,net模块是同样是nodejs的核心模块,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • nvm如何查看node版本

    nvm如何查看node版本

    文章介绍了如何使用nvm查看Node.js版本,并解决了由于旧淘宝镜像废弃导致的命令无效问题,解决方法是在nvm的setting文件中添加特定代码
    2024-12-12
  • Node的stream数据流你了解吗

    Node的stream数据流你了解吗

    这篇文章主要为大家详细介绍了Node的stream数据流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 深入解析koa之异步回调处理

    深入解析koa之异步回调处理

    这篇文章主要介绍了深入解析koa之异步回调处理,我们研究一下koa当中异步回调同步化写法的原理,同样的,我们也会实现一个管理函数,是的我们能够通过同步化的写法来写异步回调函数。,需要的朋友可以参考下
    2019-06-06
  • pnpm的安装和使用指南(推荐!)

    pnpm的安装和使用指南(推荐!)

    如果你觉得npm比较慢,又不想用yarn,那么pnpm是一个很好的选择,下面这篇文章主要给大家介绍了关于pnpm的安装和使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05

最新评论