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程序设计有所帮助。

(0)

相关推荐

  • 初学node.js-nodejs中实现删除用户路由

    一.users_model.js 功能:定义用户对象模型 var mongoose=require('mongoose'), Schema=mongoose.Schema; var UserSchema=new Schema({ username:{type:String,unique:true}, email:String, color:String, hashed_password:String }); mongoose.model('User',UserSchema); 二.users_c

  • nodejs中实现用户注册路由功能

    经过前面几次的学习,已经可以做下小功能,今天要实现的是用户注册路由. 一.users_model.js  功能:定义用户对象模型 var mongoose=require('mongoose'), Schema=mongoose.Schema; var UserSchema=new Schema({ username:{type:String,unique:true}, email:String, color:String, hashed_password:String }); mongoose

  • nodejs实现用户登录路由功能

    经过前面几次的学习,已经可以做下小功能,今天要实现的事用户登录路由. 一.users_model.js  功能:定义用户对象模型 var mongoose=require('mongoose'), Schema=mongoose.Schema; var UserSchema=new Schema({ username:{type:String,unique:true}, email:String, color:String, hashed_password:String }); mongoose

  • node和vue实现商城用户地址模块

    本文为大家分享了node和vue商城用户地址模块的实现,供大家参考,具体内容如下 server/models/user.js var mongoose = require('mongoose') var userSchema = mongoose.Schema({ "userId":String, // 用户Id "userName":String, // 用户名 "userPwd":String, // 用户密码 "orderList

  • 快速搭建Node.js(Express)用户注册、登录以及授权的方法

    项目准备 建立一个文件夹,这里叫 EXPRESS-AUTH npm init -y 启动服务 新建一个server.js 或者 app.js npm i express 开启端口,启动服务 // server.js // 引入 express const express = require('express') // 创建服务器应用程序 const app = express() app.get('/user', async (req, res) => { res.send('hello nod

  • nodejs acl的用户权限管理详解

    说明 Q: 这个工具用来做什么的呢 A: 用户有不同的权限,比如管理员,vip,普通用户,每个用户对应访问api,页面都不一样 nodejs有两个比较有名的权限管理模块 一个是acl 一个是rbac 综合对比了一下最终在做项目的时候选择了acl 功能列表: addUserRoles //给某用户添加角色 removeUserRoles //移除某用户角色 userRoles //获取某用户所有角色 roleUsers //获取所有是此角色的用户 hasRole // 某用户是否是某角色 addR

  • Node.js+Express+MySql实现用户登录注册功能

    本文实例为大家分享了Node.js实现用户登录注册的具体代码,供大家参考,具体内容如下 IDE:WebStorm 工程目录: 数据库表 Login.js: /** * Created by linziyu on 2017/7/8. */ /** * express接收html传递的参数 */ var express=require('express'); var app=express(); var mysql=require('mysql'); /** * 配置MySql */ var con

  • node+vue实现用户注册和头像上传的实例代码

    最近正好空闲,写了个实用注册代码,分享给大家,有需要的朋友可以了解一下 数据库我使用的是MongoDB. 首先做文件上传,要保证协议里面的'Content-Type'为'multipart/form-data'. 注册的步骤: 将用户名密码,图片等提交给node端 node端将图片保存到服务器,图片路径及注册用户的个人信息保存到mongodb数据库. 项目目录如下,注册功能只是其中的第一步: 前端框架使用的是vue.js,ajax使用的是vue的组件vue-resource. 前端上传代码如下

  • node.js+jQuery实现用户登录注册AJAX交互

    最近实现了Node.js当作后台,jQuery写前台AJAX代码的,实现用户登录和注册的功能,刷新了前后端交互的三观.特记录一下. 1.login.ejs实现form框架 <form > <ul> <li><p>用户名</p></li> <li><input type="text" name="username" id="username"></

  • 详解Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d

随机推荐