欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue项目使用 md5加密

程序员文章站 2024-03-16 17:58:10
...

vue项目使用 md5加密

  • 安装:npm i --save js-md5
  • 作用:就是针对前端请求的参数添加唯一的标志,还有进行单次加密
  • 每一次请求之中,在浏览器那边都会生成一个标志 (也就是 sign && _t)
    vue项目使用 md5加密
  • 因此,我们在路由拦截的时候,根据不同的请求,把对应的数据 + 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);
 });
相关标签: vue