Vue中的前端crypto.js加解密

更新時間：2022年12月13日 16:39:17 作者：舟不渡我

這篇文章主要介紹了Vue中的前端crypto.js加解密問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue前端crypto.js加解密

概述

CryptoJS (crypto.js) 為 JavaScript 提供了各種各樣的加密算法。

安裝

npm install crypto-js --save-dev

加解密

import CryptoJS from 'crypto-js';
...
/**
?* CryptoJS加密
?*/
var getAES = function(data){ //加密
? ? var key ?= 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; ?//密鑰
? ? var iv ? = '1234567812345678';
? ? var encrypted = getAesString(data,key,iv); //密文
? ? var encrypted1 = CryptoJS.enc.Utf8.parse(encrypted);
? ? return encrypted;
}

/**
?* CryptoJS解密
?*/
var getDAes = function(data){//解密
? ? var key ?= 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; ?//密鑰
? ? var iv ? = '1234567812345678';
? ? var decryptedStr = getDAesString(data,key,iv);
? ? return decryptedStr;
}

AES加解密

AES_ENCRYPT() 和 AES_DECRYPT()兩個函數(shù)有兩個參數(shù)

前一個是要加密或解密的字串，后一個是一個自己指定的Key

JSON小知識（無關(guān)上文）

JSON.parse()和JSON.stringify()用法解析

1.parse用于從一個字符串中解析出json對象

例如：

var str = {"name":"huangxiaojian","age":"23"}

通過JSON.parse(str)得到：

age: "23"
name: "huangxiaojian"
__proto__: Object

2.stringify()用于從一個對象解析出字符串

例如：

var a = {a:1,b:2}

通過JSON.stringify(a)得到：

{"a":1,"b":2}

crypto.js基于http協(xié)議的加密傳輸協(xié)議

用途

防止重要信息泄密（怎樣泄密？最簡單的，瀏覽器打開開發(fā)者模式，調(diào)到network，每一個http請求都有記錄，點擊記錄，右側(cè)則顯示http請求和http響應(yīng)的詳細(xì)數(shù)據(jù)，不管你把數(shù)據(jù)呈現(xiàn)到頁面上時進(jìn)行了怎樣的計算，初始數(shù)據(jù)就在這里，你不處理一下，加個密，這就是個問題，除非你的數(shù)據(jù)本身就不重要，所以不加密就是讓你的數(shù)據(jù)LUOBEN）

基礎(chǔ)使用

我是vue使用的crypto.js，直接使用的最簡單的AES加密解密，主要就兩個函數(shù)，一個加密，一個解密，拋出以便調(diào)用

import CryptoJS from 'crypto-js'
let key = '123456'
function addCrpto (data) {
  var encJson = CryptoJS.AES.encrypt(JSON.stringify(data), key).toString()
  var encData = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(encJson))
  return encData
}
function decCrpto (data) {
  var decData = CryptoJS.enc.Base64.parse(data).toString(CryptoJS.enc.Utf8)
  var decJson = CryptoJS.AES.decrypt(decData, key).toString(CryptoJS.enc.Utf8)
  var returndata = JSON.parse(decJson)
  return returndata
}
export {
  addCrpto, decCrpto
}

整合axios

請求：我的axios里的參數(shù)data和params都是用函數(shù)賦值，因此在賦值時，將數(shù)據(jù)加密

響應(yīng)：響應(yīng)可使用攔截，攔截下數(shù)據(jù)后，將數(shù)據(jù)的data部分進(jìn)行解密（由此可見http請求的響應(yīng)結(jié)構(gòu)一定要規(guī)范）再返回到請求的地方去

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import {addCrpto, decCrpto} from '@/utils/crypto'
 
const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})
 
/**
 * 請求攔截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token')
  return config
}, error => {
  return Promise.reject(error)
})
 
/**
 * 響應(yīng)攔截
 */
http.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) {
    Vue.cookie.delete('token')
    router.options.isAddDynamicMenuRoutes = false
    // clearLoginInfo()
    router.push({ name: 'login' })
  }
  response.data = decCrpto(response.data) // **解密**
  return response
}, error => {
  return Promise.reject(error)
})
 
/**
 * 請求地址處理
 * @param {*} actionName action方法名稱
 */
http.adornUrl = (actionName) => {
    // 對請求地址做出處理
 return actionName
}
 
/**
 * get請求參數(shù)處理
 * @param {*} params 參數(shù)對象
 * @param {*} openDefultParams 是否開啟默認(rèn)參數(shù)?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  // return openDefultParams ? merge(defaults, params) : params
  var returnItem = openDefultParams ? merge(defaults, params) : params
  return addCrpto(returnItem)// **加密**
}
 
/**
 * post請求數(shù)據(jù)處理
 * @param {*} data 數(shù)據(jù)對象
 * @param {*} openDefultdata 是否開啟默認(rèn)數(shù)據(jù)?
 * @param {*} contentType 數(shù)據(jù)格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  // return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
  var returnItem = contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
  return addCrpto(returnItem) // **加密**
}
 
export default http

// http 響應(yīng)JSON結(jié)構(gòu)
{
code: 0, // 狀態(tài)碼（400：接口不存在 500：服務(wù)端的問題 401：登錄失效 404：頁面找不到）
msg: '', // 信息
data: {
        // 響應(yīng)數(shù)據(jù)
    }
}