eggjs学习笔记第三十五天：后台登录认证简易逻辑

一、后台拿到用户名，密码及验证码之后：

①获取表单提交的数据

②判断验证码是否正确

如验证码正确：

1、要对表单里面的密码进行md5加密 md5模块 https://www.npmjs.com/package/md5

1、安装 cnpm install md5 --save

2、引入md5 var md5 = require('md5');

3、使用 md5(str)

2、在用户表（集合）中查询当前用户是否存在（mongoose操作mongodb数据库）https://www.npmjs.com/package/egg-mongoose

1、配置mongoose

2、创建操作数据库的model

3、如果数据库有此用户（登录成功） ：保存用户信息 跳转到后台管理系统

4、如果数据库有此用户（登录失败）： 跳转到登录页面

如验证码不正确：

1、跳转登录页，提示验证码不正确

完整登录代码：（注意验证码全部转成大写或者小写判断）

//执行登录的方法  post
  async doLogin() {
    console.log(this.ctx.request.body);

    var username = this.ctx.request.body.username;
    var password = await this.service.tools.md5(this.ctx.request.body.password);
    var code = this.ctx.request.body.code;

    // console.log(username,password,code);

    if (code.toUpperCase() == this.ctx.session.code.toUpperCase()) {
      var result = await this.ctx.model.Admin.find({
        userName: username,
        password: password
      });

      if (result.length > 0) {
        //登录成功

        // 1、保存用户信息
        this.ctx.session.userinfo = result[0];

        //2、跳转到用户中心
        this.ctx.redirect("/admin/manager");
      } else {
        await this.error("/admin/login", "用户名或者密码不对");
      }
    } else {
      //注意：异步和  await
      await this.error("/admin/login", "验证码错误");
    }

  }

二、封装md5服务

安装md5，并引入：var md5 = require('md5');

service>tool.js加入md5方法：

async md5(str){

    return md5(str);
  }

页面上这么调用：

var password = await this.service.tools.md5(this.ctx.request.body.password);

三、mongoose查用户表

mongoose配置如上图文字描述，不做过多简介。

model文件夹下建立schema并生成model: 对应admin表

module.exports = app => {
    const mongoose = app.mongoose;
    const Schema = mongoose.Schema;

    var d=new Date();
   
    const AdminSchema = new Schema({
      username: { type: String  },
      password: { type: String  },
      mobile: { type: String  },
      email: { type: String  },
      status: { type: Number,default:1  },
      role_id: { type:Schema.Types.ObjectId },
      add_time: {           
        type:Number,        
        default: d.getTime()
    
       },
       is_super: { type:Number}  


    });

   
    return mongoose.model('Admin', AdminSchema,'admin');
}

先手动在eggxiaomi库的admin表中插入一条假数据：创建了admin用户密码md5解密是123456

var result = await this.ctx.model.Admin.find({
        userName: username,
        password: password
      });

result就是查到的用户集合：

当输入正确的用户名密码，能从表中查到：

则跳转登录页。

四、登出

清空session中的userinfo字段就好，则匹配中间件时，userinfo无值并且不再登录，登录页以及验证码三个接口内，就会被强制拦截在登录页。

async loginOut() {
    this.ctx.session.userinfo = null;
    this.ctx.redirect("/admin/login");
  }

  router.get('/admin/loginOut', controller.admin.login.loginOut);

在public>header里面改造：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>egg后台管理系统</title>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->

<link rel="stylesheet" href="/public/admin/bootstrap/css/bootstrap.css">

<link rel="stylesheet" href="/public/admin/css/basic.css">

<script type="text/javascript" src="/public/admin/bootstrap/js/jquery-1.10.1.js"></script>

<script type="text/javascript" src="/public/admin/js/base.js"></script>




<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">

            <img src="/public/admin/images/node.jpg" height="44px;" />

        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">           
            <ul class="nav navbar-nav navbar-right">
                <li><a>欢迎您 <%=userinfo.username%></a>
                </li>
                <li><a href="/admin/loginOut">安全退出</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

核心代码就这么多。具体细节写起来费劲，日后能看懂就好，睡觉。

来源：oschina

链接：https://my.oschina.net/u/4446873/blog/4285682

标签

javascript

mongoose

navbar