vue 使用crypto-js加密解密

第一步：

下载crypto-js插件 npm i crypto-js

第二步utils文件中新建crypto.js文件

let CryptoJS = require('crypto-js');
import {getEncipher } from "@/utils/auth";
const KEY= ''  //加密key
const IV= ''  //加密IV
//key和IV自行和后端配合
export default {
/**
* 接口数据加密函数
* @param str string 需加密的json字符串
* @param key string 加密key(16位)
* @param iv string 加密向量(16位)
* @return string 加密密文字符串
*/
  encrypt(str) {
  //密钥16位
    let srcs = CryptoJS.enc.Utf8.parse(str)
    var key = CryptoJS.enc.Utf8.parse(KEY);
    //加密向量16位
    var iv = CryptoJS.enc.Utf8.parse(IV);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
  },
/**
* 接口数据解密函数
* @param str string 已加密密文
* @param key string 加密key(16位)
* @param iv string 加密向量(16位)
* @returns {*|string} 解密之后的json字符串
*/
  decrypt(str) {
    var key = CryptoJS.enc.Utf8.parse(KEY);
    var iv = CryptoJS.enc.Utf8.parse(IV);
    var decrypt = CryptoJS.AES.decrypt(str, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
    });
    return decrypt.toString(CryptoJS.enc.Utf8);
  }
  }

第三步：使用

utils文件中找到封装的axios文件加入加密和解密方法

import crypto from '@/utils/crypto.js';
//请求拦截器中加密
request.interceptors.request.use(config => {
//其他配置自行调整
    //get
   //config.params ={
        //data: crypto.encrypt(JSON.stringify(config.params||''))
   //}
   //post
   config.data={
        data:crypto.encrypt(JSON.stringify(config.data||''))
   }
}, error => {
  //出现异常
  return Promise.reject(error);
}）
//响应拦截器解密
request.interceptors.response.use(
  (response) => {
      // // 解密
      res=JSON.parse(crypto.decrypt(response.data.data)) 
      return res;
  }, error => {
    return Promise.reject(error);
})

最后请求结果： 注意点： 1、crypto-js封装必须KEY和IV，我采用的是16位数， 2、加密解密必须在拦截器里面，不然操作麻烦还不方便改动