vue项目使用 md5加密

vue项目使用 md5加密

• 安装：npm i --save js-md5
• 作用：就是针对前端请求的参数添加唯一的标志，还有进行单次加密
• 每一次请求之中，在浏览器那边都会生成一个标志 （也就是 sign && _t）
  
• 因此，我们在路由拦截的时候，根据不同的请求，把对应的数据 + Query String Paraments 这个对象的下的（_t && sign ），一起组合为一个对象，再发送到后端即可！

处理这唯一标志 sign.js

import Md5 from 'js-md5'
const salt = "cmas"

// 针对不同的参数 组合为一个请求的对象 返回！
const getSign = function (params) {
    // console.log('get请求的参数',params);
    let signStr = "";
    let keyArray = new Array();
    Object.keys(params).forEach(function(key){
        keyArray.push(key);
    });

    keyArray.sort();
    for(let i=0;i<keyArray.length;i++){
        Object.keys(params).forEach(function(key){
            if(key == keyArray[i]){
                signStr += params[key];
            }
        });
    }
    signStr += salt;
    return Md5(signStr);
}


const postSign = function(data){
    if(typeof data === 'object'){
        return getSign(data)
    }else{
        let tmpArray = data.split("&");
        var params = {};
        for(let i=0;i<tmpArray.length;i++){
            var tmp = tmpArray[i].split("=");
            params[tmp[0]] = tmp[1]
        }
        return getSign(params);

    }
}
export {
    getSign,
    postSign
}

请求拦截之中

import {getSign,postSign} from '@/utils/sign.js'
//请求拦截
request.interceptors.request.use(function (config) {
    //headers 加上From参数，方便后端判断请求来源
    config.headers.From = "cmas-ui"
    if(JSON.parse(localStorage.getItem("token"))){
        config.headers.Token = JSON.parse(localStorage.getItem("token"));
    }  
    //处理 ie浏览器之中 请求缓存问题
    if (config.method == 'post') {
        if(config.url != "/xd/loaninfoBatchApply/uploadFile"){
            config.headers = Object.assign(config.headers,
                {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                }
              );
            config.data = {
                ...config.data,
                _t: Date.parse(new Date()) / 1000
            }
            console.log('post请求之中的',config.data);
            var sign = postSign(config.data);
            config.data.sign = sign;
        }
    } else if (config.method == 'get') {
        config.params = {
            _t: Date.parse(new Date()) / 1000,
            ...config.params
        }
        let sign = getSign(config.params)
        // 给后端 设置 sign标志 代表请求的唯一
        config.params.sign = sign
    }
     return config;
 }, function (error) {
    return Promise.reject(error);
 });