vue + koa2 + crypto-js + md5加密：创建加密账户、登录验证

一、前端页面设置

1、创建账户

import CryptoJS from 'crypto-js';
const loginFun = function () {
  request({
    url: '/user/register',
    method: 'post',
    data: {
      username: ruleForm.username,
      password: CryptoJS.MD5(ruleForm.password).toString(),
      role: ruleForm.role
    }
  })
    .then((res) => {
      console.log(res);
    });
};

2、登录

import CryptoJS from 'crypto-js';
const loginFun = function () {
  request({
    url: '/user/login',
    method: 'post',
    data: {
      username: ruleForm.username,
      password: CryptoJS.MD5(ruleForm.password).toString()
    }
  })
    .then((res) => {
      if (res.data.success && res.data && res.data.data) {
        const role = res.data.data.role;
        const username = res.data.data.username;
        const token = res.data.token;
        localStorage.setItem('role', role);
        localStorage.setItem('username', username);
        localStorage.setItem('token', token);
        router.push('/');
        return;
      }
      ElMessage({
        type: 'warning',
        message: res.data.message
      });
    });
};

前端其实没什么说的，无论是创建还是登录，每次只需要加密后发到后端即可

二、后端操作

后端是koa2 + elasticsearch数据库

后端在收到后，为了增强安全，我们不会直接将前端的 password 储存到数据库中，需要再次加密一次，然后在登录时对比再次加密的数据是否相等，核心代码如下

const crypto = require(‘crypto’);
const hash = crypto.createHash(‘md5’)
hash.update(registerBody.password);
const encryptedPassword = hash.digest(‘hex’); // 这个就是再次加密后的数据

1、创建

async registerUser(ctx, next) {
    console.log('registerUser');
    const registerBody = ctx.request.body;
    // 这里就是再次加密的逻辑
    const hash = crypto.createHash('md5')
    hash.update(registerBody.password);
    const encryptedPassword = hash.digest('hex');
    console.log('encryptedPassword', encryptedPassword);
    // 储存在数据库中的操作，这里大家按自身实际情况处理
    let result = await modulesBase.registerUser({
      body: {
        username: registerBody.username,
        password: encryptedPassword,
        role: registerBody.role
      }
    });
    console.log(result);
    ctx.body = {
      data: result
    };
  }

2、登录

async loginFun(ctx, next) {
    const registerBody = ctx.request.body;
    console.log('loginFun');
    console.log(registerBody);
    // 登录时 拿到密码我们这里也是再次加密，这样就和数据库中储存的逻辑一致了
    const hash = crypto.createHash('md5')
    hash.update(registerBody.password);
    const encryptedPassword = hash.digest('hex');
    // 查找逻辑，根据用户名和密码查找是否有对应的数据
    // 这里其实有一个优化的点，我们应该先查找用户名 如果用户名匹配不上，自然登录失败
    // 然后再查找到用户名后 对比密码是否一致，我这里直接匹配了
    let result = await modulesBase.searchUser({
      query: {
        bool: {
          must: [
            {
              match: {username: registerBody.username}
            },
            {
              match: {password: encryptedPassword}
            }
          ]
        }
      }
    });
    if (result.hits && result.hits.hits.length) {
      ctx.body = {
        data: {
          data: {
            role: result.hits.hits[0]._source.role,
            username: result.hits.hits[0]._source.username
          },
          message: 'success',
          success: true,
          token: token.signToken({username: registerBody.username, password: registerBody.password})
        }
      };
      return;
    }
    ctx.body = {
      data: {
        data: null,
        message: 'Incorrect account or password',
        success: false
      }
    };
  }