vue中jsencrypt與base64加密解密的實(shí)用流程
更新時(shí)間：2023年10月16日 11:21:12 作者：碼路老默007
vue項(xiàng)目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實(shí)用流程,具有一定的參考價(jià)值,感興趣的可以了解一下
jsencrypt的實(shí)用流程
第一步，下載
npm install jsencrypt --dev
第二步，建立jsencrypt.js文件（一般放在utils文件夾里邊），內(nèi)容如下
通過公鑰加密，私鑰解密，哪個(gè)頁面需要引入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時(shí)加密
this.loginForm.password : decrypt(password),//取出時(shí)解密
base64的實(shí)用流程
Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一
在前端項(xiàng)目可用于用戶輸入密碼時(shí)加密使用，防止在數(shù)據(jù)傳輸?shù)綌?shù)據(jù)庫時(shí)密碼泄露
第一步，下載
npm install jsencrypt --dev
第二步，在項(xiàng)目文件中引入
let Base64 = require('js-base64').Base64;第三步，加密與解密
encode為加密，decode為解密
Base64.encode('admin') //YWRtaW4=
Base64.decode('YWRtaW4=') //admin到此這篇關(guān)于vue中jsencrypt與base64加密解密的實(shí)用流程的文章就介紹到這了,更多相關(guān)vue jsencrypt與base64加密解密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了探秘vue-rx 2.0(推薦)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
element validate驗(yàn)證函數(shù)不執(zhí)行的原因分析
這篇文章主要介紹了element validate驗(yàn)證函數(shù)不執(zhí)行的原因分析,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家介紹了axios攔截器工作原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
數(shù)據(jù)緩存可以提高應(yīng)用程序的性能,減少網(wǎng)絡(luò)請求,提高用戶體驗(yàn),在本文中,我們介紹了Vue中如何進(jìn)行數(shù)據(jù)緩存,并提供了一些示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 權(quán)限認(rèn)證token的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁面閃現(xiàn)原始代碼的問題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據(jù)的時(shí),頁面閃現(xiàn)原始代碼的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了Vue.js的相關(guān)知識。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能
這篇文章主要介紹了基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能,文中通過代碼示例給大家講解的非常纖細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
vue - vue.config.js中devServer配置方式
今天小編就為大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10