在前后端分离的项目中有的需要提高安全性,会要求对请求参数进行加密。
目前已使用的是对称加密,非对称加密需要网上找非对称加密方式把对称加密的修改应该就差不多。
实现思路:在项目中安装引入crypto-js 依赖,然后写个加密方法,如果有区分getpost两种请求方式那就写两个加密方法。最后在axios请求拦截方法中调用即可。

1.安装引入crypto-js。 npm install crypto-js -D
2.在项目中新建一个加密文件,比如:cryptoFun.js
3,在文件中引入加密插件

import CryptoJS from 'crypto-js';
import md5 from 'blueimp-md5';
import auth from './index'

我这边还有多引入一个md5加密。
4.写加密方法并export

export default {
  cryptoFunPost(param, keys) {
  //引入认证信息,看自己是否需要,不需要的话,只要一个get的应该就可以了。
    var authorization = auth.auths.authorization;
    if (authorization != null && authorization != '' && authorization.length == 36) {
      keys = keys + '[' + authorization + ']';
      keys = md5(keys).toString().substring(0, 16);
    }
    var srcs = CryptoJS.enc.Utf8.parse(JSON.stringify(param));
    var key = CryptoJS.enc.Utf8.parse(keys);
    var datas = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
    return datas.toString();
  },
  cryptoFunGet(param, keys) {
    var srcs = CryptoJS.enc.Utf8.parse(param);
    var key = CryptoJS.enc.Utf8.parse(keys);
    var datas = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
    return datas.toString();
  }
};

5.在axios拦截方法中调用这加密方法即可

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  //-------------加密---------------
  if (config.method == 'post') {
  //post请求不带参数与文件上传操作不加密,这个看需求进行调整
  if (config.data != undefined && config.data.constructor.name != 'FormData') {
  	cryptoFunPost(config.data,xxxxxxx)
  	}
  }else if(config.method == 'get'){
  	cryptoFunGet(config.data,xxxxxxx)
  }
  return config
  }, function (error) {
  return Promise.reject(error);
})
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐