目錄

• vue專案使用 md5加密
• • 處理這唯一標誌 sign.js
  • 請求攔截之中

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);
 });