快捷導(dǎo)航

vue使用JSEncrypt對密碼本地存儲時(shí)加解密的實(shí)現(xiàn)

更新時(shí)間：2023年07月20日 11:16:57 作者：風(fēng)過無痕

本文主要介紹了vue使用JSEncrypt對密碼本地存儲時(shí)加解密，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在實(shí)際開發(fā)中需要對一些敏感信息進(jìn)行加解密（本地存儲時(shí)），不如密碼，身份證號，公司社會碼

其實(shí)像這種普遍經(jīng)常用的功能，一般都是有第三方包拿來直接用的比如jsencrypt-提供好方法

我們可以根據(jù)提供的網(wǎng)址跟換密鑰對

下面我們就已開源項(xiàng)目若依前后端分離項(xiàng)目進(jìn)行演示

代碼實(shí)現(xiàn)

1下包

npm install jsencrypt

2.在工具文件下建包utils/jsencrypt.js-內(nèi)容如下

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
?
// 密鑰對生成 http://web.chacuo.net/netrsakeypair
?
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
  'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
?
const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
  '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
  'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
  'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
  'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
  'UP8iWi1Qw0Y='
?
// 加密
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)行解密
}

3.在需要使用加解密的頁面引入加解密方法

import { encrypt, decrypt } from "@/utils/jsencrypt";

4.頁面中使用

// 加密-加密之后在存儲在本地存儲
encrypt（需要加密數(shù)據(jù)或變量）
// 解密
decrypt (需要解密數(shù)據(jù)或變量)

總結(jié)：

經(jīng)過這一趟流程下來相信你也對 vue-使用JSEncrypt對密碼本地存儲時(shí)加解密有了初步的深刻印象，但在實(shí)際開發(fā)中我們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。

到此這篇關(guān)于vue使用JSEncrypt對密碼本地存儲時(shí)加解密的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue JSEncrypt密碼加解密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

如何使用fetchEventSource實(shí)現(xiàn)sse流式請求
這篇文章主要介紹了如何使用fetchEventSource實(shí)現(xiàn)sse流式請求問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
關(guān)于this.$refs獲取不到dom的可能原因及解決方法
這篇文章主要介紹了關(guān)于this.$refs獲取不到dom的可能原因及解決方法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼
我在做一個(gè)調(diào)用虛擬機(jī)錄屏的一個(gè)操作,需要在瀏覽器頁面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁面里的某一個(gè)頁面,并且打開瀏覽器新頁面是虛擬機(jī)的頁面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧
2023-09-09
vue中動態(tài)路由加載組件,找不到module問題及解決
這篇文章主要介紹了vue中動態(tài)路由加載組件,找不到module問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue瀑布流組件實(shí)現(xiàn)上拉加載更多
這篇文章主要為大家詳細(xì)介紹了vue瀑布流組件實(shí)現(xiàn)上拉加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
Vue中keep-alive 實(shí)現(xiàn)后退不刷新并保持滾動位置
這篇文章主要介紹了Vue中keep-alive 實(shí)現(xiàn)后退不刷新并保持滾動位置的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
Vue中非父子組件通信的方法小結(jié)
在Vue.js中,組件間的通信是構(gòu)建復(fù)雜應(yīng)用的關(guān)鍵,但當(dāng)涉及到非父子關(guān)系的組件通信時(shí),傳統(tǒng)的做法就顯得力不從心了,本文將深入探討幾種有效的非父子組件通信方法,并通過具體的代碼示例來幫助讀者理解和應(yīng)用這些技術(shù),需要的朋友可以參考下
2024-09-09
vue axios 在頁面切換時(shí)中斷請求方法 ajax
下面小編就為大家分享一篇vue axios 在頁面切換時(shí)中斷請求方法 ajax，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
一次搞清Vue3中組件通訊的全部方式
毫無疑問,組件通訊是Vue中非常重要的技術(shù)之一,它的出現(xiàn)能夠使我們非常方便的在不同組件之間進(jìn)行數(shù)據(jù)的傳遞,以達(dá)到數(shù)據(jù)交互的效果,所以,學(xué)習(xí)組件通訊技術(shù)是非常有必要的,本文將一次解決Vue3中組件通訊的全部方式,總有你想要的那一種,需要的朋友可以參考下
2024-09-09
詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
這篇文章主要介紹了詳解Vue中l(wèi)ocalstorage和sessionstorage的使用方法和經(jīng)驗(yàn)心得，有需要的朋友跟著小編參考學(xué)習(xí)下吧。
2017-12-12