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()兩個(gè)函數(shù)有兩個(gè)參數(shù)
前一個(gè)是要加密或解密的字串,后一個(gè)是一個(gè)自己指定的Key
JSON小知識(shí)(無(wú)關(guān)上文)
JSON.parse()和JSON.stringify()用法解析
1.parse用于從一個(gè)字符串中解析出json對(duì)象
例如:
var str = {"name":"huangxiaojian","age":"23"}通過JSON.parse(str)得到:
age: "23" name: "huangxiaojian" __proto__: Object
2.stringify()用于從一個(gè)對(duì)象解析出字符串
例如:
var a = {a:1,b:2}通過JSON.stringify(a)得到:
{"a":1,"b":2}crypto.js基于http協(xié)議的加密傳輸協(xié)議
用途
防止重要信息泄密(怎樣泄密?最簡(jiǎn)單的,瀏覽器打開開發(fā)者模式,調(diào)到network,每一個(gè)http請(qǐng)求都有記錄,點(diǎn)擊記錄,右側(cè)則顯示http請(qǐng)求和http響應(yīng)的詳細(xì)數(shù)據(jù),不管你把數(shù)據(jù)呈現(xiàn)到頁(yè)面上時(shí)進(jìn)行了怎樣的計(jì)算,初始數(shù)據(jù)就在這里,你不處理一下,加個(gè)密,這就是個(gè)問題,除非你的數(shù)據(jù)本身就不重要,所以不加密就是讓你的數(shù)據(jù)LUOBEN)

基礎(chǔ)使用
我是vue使用的crypto.js,直接使用的最簡(jiǎn)單的AES加密解密,主要就兩個(gè)函數(shù),一個(gè)加密,一個(gè)解密,拋出以便調(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
請(qǐng)求:我的axios里的參數(shù)data和params都是用函數(shù)賦值,因此在賦值時(shí),將數(shù)據(jù)加密
響應(yīng): 響應(yīng)可使用攔截,攔截下數(shù)據(jù)后,將數(shù)據(jù)的data部分進(jìn)行解密(由此可見http請(qǐng)求的響應(yīng)結(jié)構(gòu)一定要規(guī)范)再返回到請(qǐng)求的地方去
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'
}
})
/**
* 請(qǐng)求攔截
*/
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)
})
/**
* 請(qǐng)求地址處理
* @param {*} actionName action方法名稱
*/
http.adornUrl = (actionName) => {
// 對(duì)請(qǐng)求地址做出處理
return actionName
}
/**
* get請(qǐng)求參數(shù)處理
* @param {*} params 參數(shù)對(duì)象
* @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請(qǐng)求數(shù)據(jù)處理
* @param {*} data 數(shù)據(jù)對(duì)象
* @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:頁(yè)面找不到)
msg: '', // 信息
data: {
// 響應(yīng)數(shù)據(jù)
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場(chǎng)景是需要經(jīng)常用到的,但是根據(jù)業(yè)務(wù)的不同,好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類的,即使用戶跳轉(zhuǎn)到其它頁(yè)面或者刷新,再次回到登錄也,驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn),感興趣的朋友一起看看吧2022-08-08
VUE項(xiàng)目運(yùn)行npm install報(bào)錯(cuò)問題以及解決
在運(yùn)行Vue項(xiàng)目時(shí)遇到npm安裝錯(cuò)誤可使用命令npminstall--legacy-peer-deps解決,若VsCode中無(wú)法運(yùn)行npm命令,則可能是IDE配置未生效,可嘗試重啟電腦或使用cmd命令行直接在項(xiàng)目目錄下運(yùn)行2024-10-10
Vue-CLI3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法步驟
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項(xiàng)目, 利用scp2自動(dòng)化部署到靜態(tài)文件服務(wù)器 Nginx,感興趣的可以了解一下2021-11-11
vue-cli實(shí)現(xiàn)多頁(yè)面多路由的示例代碼
本篇文章主要介紹了vue-cli實(shí)現(xiàn)多頁(yè)面多路由的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue路由傳參頁(yè)面刷新參數(shù)丟失問題解決方案
這篇文章主要介紹了vue路由傳參頁(yè)面刷新參數(shù)丟失問題解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)示例
本篇文章主要介紹了vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10
如何解決npm i下載依賴的時(shí)候出現(xiàn)某依賴版本沖突
這篇文章主要介紹了如何解決npm i 下載依賴的時(shí)候出現(xiàn)某依賴版本沖突問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue2實(shí)現(xiàn)txt文件在線預(yù)覽的代碼示例
txt文件在線預(yù)覽不需要下載另外的插件,主要有兩種形式,一種是上傳完成后實(shí)現(xiàn)預(yù)覽;另一種是后端提供文件下載接口,獲取文件在線地址實(shí)現(xiàn)預(yù)覽;本文給大家介紹了Vue2實(shí)現(xiàn)txt文件在線預(yù)覽的代碼示例,需要的朋友可以參考下2025-01-01

