vue中jsencrypt與base64加密解密的實用流程
更新時間：2023年10月16日 11:21:12 作者：碼路老默007
vue項目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實用流程,具有一定的參考價值,感興趣的可以了解一下
jsencrypt的實用流程
第一步，下載
npm install jsencrypt --dev
第二步，建立jsencrypt.js文件（一般放在utils文件夾里邊），內(nèi)容如下
通過公鑰加密，私鑰解密，哪個頁面需要引入utils/jsencrypt文件即可
import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
// 密鑰對生成 http://web.chacuo.net/netrsakeypair; 把下面生成的公鑰、私鑰換成自己生成的即可
const publicKey = '',//生成的公鑰
const privateKey='',
// 加密
export function encrypt(txt) {
const encryptor = new JSEncrypt()
encryptor.setPublicKey(publicKey) // 設(shè)置公鑰
return encryptor.encrypt(txt) // 對數(shù)據(jù)進(jìn)行加密
}
// 解密
export function decrypt(txt) {
const encryptor = new JSEncrypt()
encryptor.setPrivateKey(privateKey) // 設(shè)置私鑰
return encryptor.decrypt(txt) // 對數(shù)據(jù)進(jìn)行解密
}
第三步，頁面使用
import { encrypt, decrypt } from '@/utils/jsencrypt'//rememberMe-password加密
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });//存到cookies時加密
this.loginForm.password : decrypt(password),//取出時解密
base64的實用流程
Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一
在前端項目可用于用戶輸入密碼時加密使用，防止在數(shù)據(jù)傳輸?shù)綌?shù)據(jù)庫時密碼泄露
第一步，下載
npm install jsencrypt --dev
第二步，在項目文件中引入
let Base64 = require('js-base64').Base64;第三步，加密與解密
encode為加密，decode為解密
Base64.encode('admin') //YWRtaW4=
Base64.decode('YWRtaW4=') //admin到此這篇關(guān)于vue中jsencrypt與base64加密解密的實用流程的文章就介紹到這了,更多相關(guān)vue jsencrypt與base64加密解密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
DeepSeek?助力?Vue?開發(fā)絲滑的步驟條效果(過程詳解)
本文詳細(xì)介紹了如何使用Vue.js和ElementUI創(chuàng)建一個進(jìn)度條組件,并將所有代碼保存在一個文件夾中,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-02-02
element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時,會造成頁面卡死問題,下面這篇文章主要給大家介紹了關(guān)于element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁卡死崩潰的解決辦法,需要的朋友可以參考下2023-02-02
本文主要介紹了vue項目proxyTable配置小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue路徑上如何設(shè)置指定的前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue中如何初始化data數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
本文主要介紹了Vue出現(xiàn)彈出層時禁止底部頁面跟隨滑動，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue實現(xiàn)圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)
這篇文章主要介紹了vue實現(xiàn)圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
強(qiáng)制Vue重新渲染組件的5種方法小結(jié)
在開發(fā)Vue.js應(yīng)用程序時,有時我們需要強(qiáng)制重新渲染組件以確保數(shù)據(jù)和視圖同步,下面就來介紹一下強(qiáng)制Vue重新渲染組件的5種方法,感興趣的可以了解一下2025-06-06