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

时间 2020-05-21

标签 eggjs 学习笔记第三十五天 15天后台登陆认证简易逻辑繁體版

原文原文链接

1、后台拿到用户名，密码及验证码以后：

①获取表单提交的数据javascript

②判断验证码是否正确css

如验证码正确：html

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

一、安装 cnpm install md5 --save

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

三、使用 md5(str)

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

一、配置mongoose

二、建立操做数据库的model

三、若是数据库有此用户（登陆成功） ：保存用户信息 跳转到后台管理系统

四、若是数据库有此用户（登陆失败）： 跳转到登陆页面

如验证码不正确：

一、跳转登陆页，提示验证码不正确

完整登陆代码：（注意验证码所有转成大写或者小写判断）

//执行登陆的方法  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) {
        //登陆成功

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

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

  }

2、封装md5服务

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

service>tool.js加入md5方法：mongodb

async md5(str){

    return md5(str);
  }

页面上这么调用：数据库

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

3、mongoose查用户表

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

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

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就是查到的用户集合：

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

则跳转登陆页。

4、登出

清空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>

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