前端加密解密传输

 

cnpm install crypto-js --save-dev
cnpm install js-md5 --save-dev

 

request.js

import axios from 'axios'
import {  Message } from 'element-ui'
import { getToken,removeToken } from '@/utils/auth'
import { encrypt,checkDigest,decrypt} from '@/utils/crypto' 
import router from '@/router'
let ROOT;
let mode;//判断是否加密
if (process.env.NODE_ENV === 'development') {
    ROOT = "/api"
  mode=3
} else {
   ROOT = window.ROOT;
  mode=3
}
var service = axios.create({
  baseURL: ROOT, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 50000 ,// request timeout
  headers: {
     'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }
})
// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    let ts=(new Date()).valueOf();//时间戳
    let token = getToken()
    if (token) {
      config.headers['token'] = token
    }
    if(mode===3){
      config.data=encrypt(JSON.stringify(config.data));
    }else if(mode===0){
      let postData={
        msgId:'uid',
        token,
        mode:0,
        body:JSON.stringify(config.data),
        digest:null,
        ts
      }
      config.data=postData
    }
    // console.log(config.data,'加密后参数')
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
     return Promise.reject(error)
  }
)
// response interceptor
service.interceptors.response.use(
  response => {
    console.log(response,'888')
    if (response.data.result == -99) {   //token 失效
      removeToken()
      router.push("/login");
      location.reload()
    }
    if(response.data.mode==3){
      var res = response.data
      if (res.result != 0) {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
        if (res.code == 2) {   //token 失效
          removeToken()
          router.push("/login");
          location.reload()
        }
        return Promise.reject(new Error(res.message || 'Error')).catch(err => {
          // console.log(err) // 这里catch到错误
        })
      } else {
            //先验签报文摘要
          let flag=checkDigest(res.digest,res.body,res.ts);
          console.log(flag,'校验结果')
          if(flag){
            let result=decrypt(res.body,'UX00H5n2BN7L4Y5H');
            return result
          }else{
            this.$message.error("验签失败");
            return false
          }
        }
    }else if(response.data.mode==0) {
      if(response.data.result!=0){
        this.$message.error('请求数据错误')
        return 
      }
      //不需要解密
      var res = response.data.body
      if (res.code == 1) {
        return res
      } else {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
  
        if (res.code == 2) {   //token 失效
          removeToken()
          router.push("/login");
          location.reload()
        }
        return Promise.reject(new Error(res.message || 'Error')).catch(err => {
          // console.log(err) // 这里catch到错误
        })
      }
    }
    
    // console.log(res)
    // if the custom code is not 20000, it is judged as an error.
   
  },
  error => {
     console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    // return Promise.reject(error)
  }
)

export default service

crypto.js

// 引入CryptoJS包
import CryptoJS from 'crypto-js'
import md5 from 'js-md5';
// AES加密密钥
const aes_key = '*************';
// AES加密
export function encrypt(data, keyStr) { 
    
    let ts=(new Date()).valueOf();//时间戳
    keyStr = keyStr ? keyStr : aes_key;
    var key  = CryptoJS.enc.Utf8.parse(keyStr);
    var srcs = CryptoJS.enc.Utf8.parse(data);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
    let body=window.btoa(encrypted.toString());
    let encryptData={
        msgId:'uid',
        token: localStorage.getItem('token'),
        mode:3,
        body,
        digest:md5(`${body}${ts}`),
        ts
    }
    
    return encryptData;
}
//验签报文摘要
export function checkDigest(digest,body,ts) { 
    let data = md5(`${body}${ts}`)
    if(digest===data){
        return true
    }else{
        return false
    } 
}
// AES解密
export function  decrypt(body, keyStr){ 
    let data=window.atob(body) 
    console.log(data,keyStr,'解密数据');
    keyStr = keyStr ? keyStr : aes_key;
    console.log(keyStr,'解密数据1');
    var key  = CryptoJS.enc.Utf8.parse(keyStr);
    console.log(key,'解密数据2');
    var decrypt = CryptoJS.AES.decrypt(data, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
    console.log(decrypt,'解密数据4');
    let res= JSON.parse(CryptoJS.enc.Utf8.stringify(decrypt).toString())
    console.log(typeof(res),res.code,'000')
    return res
    //return window.atob(CryptoJS.enc.Utf8.stringify(decrypt).toString());
}