前端使用AES密码加密、解密，使用详细（crypto加密解密，前后端分离，AES加密解密）

阳光穿透心脏的1/2处 2023-10-02 23:42 38阅读 0赞

#### **1、首先安装 crypto-js插件，安装命令如下：**  ####

npm install  crypto-js -S

**-S等同于--save，保存在package.json文件中，是在dependencies 下，  
\--save安装包信息将加入到dependencies（生产环境）中，生产阶段的依赖，也就是项目运行时的依赖，就是程序上线后仍然需要依赖；**

**-D等同于--save-dev，也保存在package.json文件中，是在devDependencies下，  
\--save-dev 安装包信息将加入到devDependencies（开发环境）中，开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用。**

**详见>>**

**[\--save，--save-dev，--global各自的含义![icon-default.png_t_N5K3][]https://blog.csdn.net/weixin\_65793170/article/details/128267888?ops\_request\_misc=&request\_id=5443803715234ac993eeceda37affce9&biz\_id=&utm\_medium=distribute.pc\_search\_result.none-task-blog-2~blog~koosearch~default-1-128267888-null-null.268%5Ev1%5Econtrol&utm\_term=-s&spm=1018.2226.3001.4450][--save_--save-dev_--global_icon-default.png_t_N5K3_https_blog.csdn.net_weixin_65793170_article_details_128267888_ops_request_misc_request_id_5443803715234ac993eeceda37affce9_biz_id_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_koosearch_default-1-128267888-null-null.268_5Ev1_5Econtrol_utm_term_-s_spm_1018.2226.3001.4450]**

#### **2、然后新建crypto.js文件，封装自定义加密和解密的方法，并导出：** ####

import CryptoJS from 'crypto-js'
     
    // 默认的KEY与iv与后端保持一致，不采用后端传值密钥
    const KEY = CryptoJS.enc.Utf8.parse('aaDJL2d9DfhLZO0z');// 密钥
    const IV = CryptoJS.enc.Utf8.parse('412ADDSSFA342442');// 偏移量  
    
    /** AES加密 */
    export function Encrypt(word, keyStr, ivStr) {
      let key = KEY;
      let iv = IV;
     
      if (keyStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
      }
     
      let srcs = CryptoJS.enc.Utf8.parse(word);
      var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
      });
     
      return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
     
    }
    
    
    /** AES 解密 */
    export function Decrypt(word, keyStr, ivStr) {
      let key  = KEY;
      let iv = IV;
     
      if (keyStr) {
        key = CryptoJS.enc.Utf8.parse(keyStr);
        iv = CryptoJS.enc.Utf8.parse(ivStr);
      }
     
      let base64 = CryptoJS.enc.Base64.parse(word);
      let src = CryptoJS.enc.Base64.stringify(base64);
     
      var decrypt = CryptoJS.AES.decrypt(src, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding
      });
     
      var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
      return decryptedStr.toString();
    
    }

####  ####

#### **3、直接在需要页面，引入使用：** ####

//引入
    import {Decrypt,Encrypt} from "./crypto.js";
    
    //使用方式
    Encrypt(JSON.stringify(config.data));//加密
    
    eg: //密码加密
    this.formLogin.password = Encrypt(JSON.stringify(this.formLogin.password));
    
    JSON.parse(Decrypt(response.data));//解密
    
    eg: //密码解密
    this.formLogin.password = JSON.parse(Decrypt(this.getCookie("password")));

**创作不易，感觉有用，就一键三连，感谢(●'◡'●)**

[icon-default.png_t_N5K3]: https://csdnimg.cn/release/blog_editor_html/release2.3.2/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N5K3
[--save_--save-dev_--global_icon-default.png_t_N5K3_https_blog.csdn.net_weixin_65793170_article_details_128267888_ops_request_misc_request_id_5443803715234ac993eeceda37affce9_biz_id_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_koosearch_default-1-128267888-null-null.268_5Ev1_5Econtrol_utm_term_-s_spm_1018.2226.3001.4450]: https://blog.csdn.net/weixin_65793170/article/details/128267888?ops_request_misc=&request_id=5443803715234ac993eeceda37affce9&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~koosearch~default-1-128267888-null-null.268%5Ev1%5Econtrol&utm_term=-s&spm=1018.2226.3001.4450