vue項目base64加解密使用方式以及解密亂碼
更新時間：2024年05月16日 10:53:25 作者：mewmew1
這篇文章主要介紹了vue項目base64加解密使用方式以及解密亂碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目base64加解密及解密亂碼
一、vue項目使用base64加解密
1.安裝 base64插件：
npm i js-base64 --save
2.頁面中引入：
有兩種方式：
- (1) import {Base64} from ‘js-base64’
- (2) let Base64=require(‘js-base64’).Base64
3.頁面中使用
- 解密 let a=Base64.decode(route.query.token)
- 加密 Base64.encode(password);
二、解密亂碼問題
問題：
后端返回的鏈接的token里帶有加號，使用route.query.token獲取到的token里 +號會變成空格，導(dǎo)致解密后部分內(nèi)容變成亂碼。
解決方法：
1.鏈接是后端返回時，需后端處理，將+號編碼變成%2B，再返回鏈接進行跳轉(zhuǎn)即可
2.鏈接是前端寫的話，可直接使用encodeURIComponent()進行編碼，將+號變成%2B，再進行跳轉(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue組合式API淺顯入門示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解
計算屬性就是 Vue 實例選項中的 computed，computed 的值是一個對象類型，對象中的屬性值為函數(shù)，而且這個函數(shù)沒辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下2022-11-11
vue3?setup語法糖中獲取slot插槽的dom對象代碼示例
slot元素是一個插槽出口,標(biāo)示了父元素提供的插槽內(nèi)容將在哪里被渲染,這篇文章主要給大家介紹了關(guān)于vue3?setup語法糖中獲取slot插槽的dom對象的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue中實現(xiàn)過渡動畫效果示例代碼,Vue中為我們提供一些內(nèi)置組件和對應(yīng)的API來完成動畫，利用它們我們可以方便的實現(xiàn)過渡動畫效果，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)自定義全局右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue、react等單頁面項目部署到服務(wù)器的方法及vue和react的區(qū)別
這篇文章主要介紹了vue、react等單頁面項目部署到服務(wù)器的方法,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue-CLI與Vuex使用方法,結(jié)合實例形式分析了Vue-CLI創(chuàng)建項目與Vuex相關(guān)概念、使用方法及操作注意事項,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue 動態(tài)生成數(shù)據(jù)字段的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
element日期選擇器el-date-picker樣式圖文詳解
最近寫的項目里面有一個功能是日期選擇功能,第一反應(yīng)是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關(guān)于element日期選擇器el-date-picker樣式的相關(guān)資料,需要的朋友可以參考下2022-09-09
本文主要介紹了elementUI中使用formdata進行上傳文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03