登陆与登出功能

登陆
前端代码

// header.vue中
<div class="md-modal modal-msg md-modal-transition" v-bind:class="{'md-show':loginModalFlag}">
      <div class="md-modal-inner">
        <div class="md-top">
          <div class="md-title">Login in</div>
          <button class="md-close" @click="loginModalFlag=false">Close</button>
        </div>
        <div class="md-content">
          <div class="confirm-tips">
            <div class="error-wrap">
              <span class="error error-show" v-show="errorTip">用户名或者密码错误</span>
            </div>
            <ul>
              <li class="regi_form_input">
                <i class="icon IconPeople"></i>
                <input type="text" tabindex="1" name="loginname" v-model="userName" class="regi_login_input regi_login_input_left" placeholder="User Name" data-type="loginname">
              </li>
              <li class="regi_form_input noMargin">
                <i class="icon IconPwd"></i>
                <input type="password" tabindex="2"  name="password" v-model="userPwd" class="regi_login_input regi_login_input_left login-input-no input_text" placeholder="Password" @keyup.enter="login">
              </li>
            </ul>
          </div>
          <div class="login-wrap">
            <a href="javascript:;" class="btn-login" @click="login">登  录</a>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" v-if="loginModalFlag" @click="loginModalFlag=false"></div>

methods:{
        login(){
          console.log("userName"+this.userName);
          if(!this.userName || !this.userPwd){
            this.errorTip = true;
            return;
          }
          axios.post("/users/login",{
            userName:this.userName,
            userPwd:this.userPwd,
          }).then((response)=>{
            let res = response.data;
            if(res.status == "0"){
              this.errorTip = false;
              this.loginModalFlag = false;
              this.nickName = res.result.userName;
              // to-do
            }else{
              this.errorTip = true;
            }
          });
        },
        logOut(){
          axios.post("/users/logout").then((response)=>{
            let res = response.data;
            if(res.status == '0'){
              this.nickName='';
            }
          })
        }
    }

后端，在server/models/user.js中创建user模型

var moogoose = require('mongoose');
let userSchema = new moogoose.Schema({
  "userId":String,
  "userName":String,
  "userPwd":String,
  "orderList":Array,
  "cartList":[
    {
      "productId":String,
      "productName":String,
      "salePrice":String,
      "productImage":String,
      "checked":String,
      "productNum":String
    }],
  "addressList":Array
});
module.exports = moogoose.model("User",userSchema)

server/routes/users.js创建二级路由

var express = require('express');   // 导入express框架
var router = express.Router();
var User = require('../models/user');  // 导入user模型
// 登陆请求
router.post('/login',function (req,res,next) {
  var param ={
    userName:req.body.userName,
    userPwd:req.body.userPwd
  }
  User.findOne(param,function (err,doc) {  // 根据参数到数据库中寻找
    if(err){
      res.json({
        status:"1",
        msg:err.message
      })
    }else{
      if(doc){
        // 将用户ID存放在cookie中
        res.cookie("userId",doc.userId,{
          path:'/',  // cookie存放的路径
          maxAge:1000*60*60  // cookie周期，一小时
        })
        // 将信息存在session当中
        // req.session.user = doc;
        res.json({
          status:'0',
          mag:'',
          result:{
            userName:doc.userName
          }
        })
      }
    }
  })
})

router.post('/logout',function (req,res,next) {
  // 清楚cookie中的用户ID
  res.cookie("userId","",{
    path: '/',
    maxAge: -1
  })
  res.json({
    status:'0',
    msg:'',
    result:''
  })
});
module.exports = router;