vue項(xiàng)目base64加解密使用方式以及解密亂碼
vue項(xiàng)目base64加解密及解密亂碼
一、vue項(xiàng)目使用base64加解密
1.安裝 base64插件：
npm i js-base64 --save
2.頁(yè)面中引入：
有兩種方式：
- (1) import {Base64} from ‘js-base64’
- (2) let Base64=require(‘js-base64’).Base64
3.頁(yè)面中使用
- 解密 let a=Base64.decode(route.query.token)
- 加密 Base64.encode(password);
二、解密亂碼問題
問題：
后端返回的鏈接的token里帶有加號(hào)，使用route.query.token獲取到的token里 +號(hào)會(huì)變成空格，導(dǎo)致解密后部分內(nèi)容變成亂碼。
解決方法：
1.鏈接是后端返回時(shí)，需后端處理，將+號(hào)編碼變成%2B，再返回鏈接進(jìn)行跳轉(zhuǎn)即可
2.鏈接是前端寫的話，可直接使用encodeURIComponent()進(jìn)行編碼，將+號(hào)變成%2B，再進(jìn)行跳轉(zhuǎn)即可
使用Base64加密、解密以及des加密、解密
Base64加密、解密
- 第一步：
npm install js-base64 --save 下載依賴
- 第二步：
直接引入即可
import { Base64 } from 'js-base64';- 第三步：
Base64.encode(xxxx)
其中
- .encode() 加密
- .decode() 解密
中間不需要使用加密的key等其他字符
des加密、解密
- 第一步：
npm install crypto-js --save 下載依賴
- 第二步：
引入 ：
import CryptoJS from "crypto-js";
- 第三步：
封裝一下：
function encryptDes(word, keyStr, ivStr) {
keyStr = keyStr || 'xxxx'
ivStr = ivStr || 'xxxx'
let key = CryptoJS.enc.Utf8.parse(keyStr)
let iv = CryptoJS.enc.Utf8.parse(ivStr)
let srcs = CryptoJS.enc.Utf8.parse(word)
let encrypted = CryptoJS.DES.encrypt(srcs, key, {
iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
})
return encrypted.toString()
}
// 解密
function decryptDes(word, keyStr, ivStr) {
try {
keyStr = keyStr || 'xxxxx'
ivStr = ivStr || 'xxxx'
var key = CryptoJS.enc.Utf8.parse(keyStr)
let iv = CryptoJS.enc.Utf8.parse(ivStr)
var decrypt = CryptoJS.DES.decrypt({ ciphertext: CryptoJS.enc.Base64.parse(word) }, key, {
iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
})
return decrypt.toString(CryptoJS.enc.Utf8)
} catch (err) {
return 'false'
}
}
export { encryptDes, decryptDes };其中 keyStr ivStr 需要和后端伙伴統(tǒng)一一下的秘鑰
- 第四步：
在組件中使用 decryptDes（xxxx） 即可
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹形菜單篩選過濾功能，需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)彈窗拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示效果
這篇文章主要介紹了vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過天地圖、openlayers實(shí)現(xiàn)底圖添加，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04
vue3中ace-editor的簡(jiǎn)單使用方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3中ace-editor簡(jiǎn)單使用的相關(guān)資料,ace-editor是一種代碼編輯器,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
組件中多個(gè)el-upload存在導(dǎo)致上傳圖片失效的問題及解決
這篇文章主要介紹了組件中多個(gè)el-upload存在導(dǎo)致上傳圖片失效的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
基于Vue3+西瓜視頻播放器(xgplayer)移動(dòng)端直播解決方案
在現(xiàn)代前端開發(fā)中,視頻播放功能越來越常見,從在線教育到娛樂平臺(tái)都離不開高質(zhì)量的視頻播放器,這篇文章主要介紹了基于Vue3+西瓜視頻播放器(xgplayer)移動(dòng)端直播的相關(guān)資料,需要的朋友可以參考下2026-02-02
vue利用v-for嵌套輸出多層對(duì)象,分別輸出到個(gè)表的方法
今天小編就為大家分享一篇vue利用v-for嵌套輸出多層對(duì)象,分別輸出到個(gè)表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)，在子組件上顯示不出來，本文給大家分享兩種解決方案幫助大家解決這個(gè)問題,需要的朋友可以參考下2023-08-08
一起寫一個(gè)即插即用的Vue Loading插件實(shí)現(xiàn)
這篇文章主要介紹了一起寫一個(gè)即插即用的Vue Loading插件實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue-cli3多環(huán)境打包配置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03