快捷導(dǎo)航

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

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

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

前言

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

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

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

下面我們就已開(kāi)源項(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'
?
// 密鑰對(duì)生成 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) // 對(duì)數(shù)據(jù)進(jìn)行加密
}
?
// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 設(shè)置私鑰
  return encryptor.decrypt(txt) // 對(duì)數(shù)據(jù)進(jìn)行解密
}

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

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

4.頁(yè)面中使用

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

總結(jié)：

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

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

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目配置eslint保存自動(dòng)格式化問(wèn)題
這篇文章主要介紹了vue項(xiàng)目配置eslint保存自動(dòng)格式化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue 全選與反選的實(shí)現(xiàn)方法(無(wú)Bug 新手看過(guò)來(lái))
下面小編就為大家分享一篇vue 全選與反選的實(shí)現(xiàn)方法(無(wú)Bug 新手看過(guò)來(lái))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue-cli3.0+element-ui上傳組件el-upload的使用
這篇文章主要介紹了vue-cli3.0+element-ui上傳組件el-upload的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
vue.js評(píng)論發(fā)布信息可插入QQ表情功能
這篇文章主要為大家詳細(xì)介紹了vue.js評(píng)論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue中偵聽(tīng)器的基本用法示例
隨著Vue的使用越來(lái)越多,對(duì)Vue的其他知識(shí)點(diǎn)也開(kāi)始逐漸多了解一點(diǎn),這次做頁(yè)面上的計(jì)算,用了Watch偵聽(tīng)器,這篇文章主要給大家介紹了關(guān)于Vue中偵聽(tīng)器基本用法的相關(guān)資料,需要的朋友可以參考下
2021-08-08
vue+element UI實(shí)現(xiàn)樹(shù)形表格帶復(fù)選框的示例代碼
這篇文章主要介紹了vue+element UI實(shí)現(xiàn)樹(shù)形表格帶復(fù)選框的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue中獲取圖片高度的兩種方法
在使用Vue2開(kāi)發(fā)移動(dòng)端頁(yè)面的時(shí)候,需要做一個(gè)效果,實(shí)現(xiàn)的方案是背景漸變,但是想要實(shí)現(xiàn)這個(gè)效果就必須進(jìn)行定位,我的背景高度需要在一個(gè)十分恰當(dāng)?shù)奈恢?但是我的圖片會(huì)隨著移動(dòng)端頁(yè)面的變化而發(fā)生高度的變化,為什么會(huì)變化？所以本文介紹了Vue中獲取圖片高度的方法
2024-08-08
淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能
在項(xiàng)目開(kāi)發(fā)中有時(shí)候需求需要手動(dòng)實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下
2024-03-03
VUE中computed 、created 、mounted的先后順序說(shuō)明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題
這篇文章主要介紹了vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10