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>

核心代碼就這麼多。具體細節寫起來費勁，往後能看懂就好，睡覺。