前端登陆加密解决方案

项目背景

环食药烟草的数据下载模块中，需要判断用户在进行数据下载时是进行了登录操作，如果没有登录要跳转登陆页面，输入账号和密码进行登录。

使用场景

项目中需要前端书写登录页面，用户输入账号密码，前端获取到用户输入的账号密码做登陆操作时需要采用对密码做加密处理。

解决方案

前端通过使用CryptoJS库进行加密处理。CryptoJS库是一种常用的前端加密库，支持多种加密方式，常用的加密方式有：

1. AES：高级加密标准，目前最常用的对称加密算法之一。可以使用128位、192位或256位密钥进行加密
2. DES：数据加密标准，一种较早的对称加密算法。可以使用56位密钥进行加密
3. TripleDES：三重数据加密标准，基于DES算法的一个更安全的版本，可以使用112位或168位密钥进行加密
4. MD5：消息摘要算法，一种单向哈希函数，常用于对密码进行加密和验证
5. SHA：安全散列算法，类似于MD5，但更安全，可以使用不同的位数（如SHA-256、SHA-384、SHA-512）进行加密
6. HMAC：基于哈希函数的消息认证码算法，用于验证数据完整性和真实性

使用指南

• 使用 npm或者yarn 安装 crypto-js

  npm install crypto-js –save
  yarn add crypto-js
  

• 在 main.js 引入

  import CryptoJS from “crypto-js”;
  
  Vue.prototype.cryptoJS = CryptoJS;
  

• 在 App.vue 使用

  export default {
       
  	mounted() {
       
  		console.log('this.cryptoJS', this.cryptoJS)
  	}
  }
  

  控制台打印内容如下：
  

  说明安装成功，可以在项目中正常使用了~

  可以看出来 crypto-js 库的加密算法有很多。环食药烟草数据下载模块中采用的是 SHA256加密算法。SHA256 是一种单向加密算法，意味着对于给定的哈希值，无法通过解密算法直接还原出原始数据。SHA256 算法是不可逆的，这也是其安全性的基础之一，目前没有已知的有效方法可以快速破解它。

• SHA256算法加密

  const password = 'hello world';
  const res = this.cryptoJS.SHA256(password);
  const plainRes = res.toString(); // 加密的结果
  console.log('password 加密的结果是:', plainRes); // 
  

• 前后端判断逻辑

  1. 用户输入账号密码
  2. 前端对密码进行 SHA256 算法加密密码
  3. 后端将前端传入的已加密的密码存入数据库
  4. 用户再次登录时根据前端传入的已加密的密码与数据库中存入的密码进行比较，一致说明密码正确；否则错误

其他常用加密算法使用指南

• AES加密

  // AES 加密
  decrypt(word, key, iv) {
       
    let srcs = this.cryptoJS.enc.Utf8.parse(word);
    const AES_JM_RES = this.cryptoJS.AES.encrypt(srcs, key, {
       
      // 对称加密算法主要有AES、DES、3DES / 非对称加密算法主要有RSA、DSA、RCC
      // iv(初始变量)
      // key(加密密钥)
      // mode(加密模式 主要有CBC(默认)、CFB、CTR、OFB、ECB)
      // padding(填充方式 主要有Pkcs7(默认)、Iso97971、AnsiX923、Iso10126、ZeroPadding)
      iv: iv,
      mode: this.cryptoJS.mode.CBC, // 选择模式为CBC