快捷導(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: