vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue JSEncrypt密码加解密

vue使用JSEncrypt对密码本地存储时加解密的实现

作者:風过无痕

本文主要介绍了vue使用JSEncrypt对密码本地存储时加解密,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

在实际开发中需要对一些敏感信息进行加解密(本地存储时),不如密码,身份证号,公司社会码

其实像这种普遍经常用的功能,一般都是有第三方包拿来直接用的比如jsencrypt-提供好方法

我们可以根据提供的网址跟换密钥对

下面我们就已开源项目若依前后端分离项目进行演示

代码实现

1下包

npm install jsencrypt

2.在工具文件下建包utils/jsencrypt.js-内容如下

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) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}
​
// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

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

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

4.页面中使用

// 加密-加密之后在存储在本地存储
encrypt(需要加密数据或变量)
// 解密
decrypt (需要解密数据或变量)

总结:

经过这一趟流程下来相信你也对 vue-使用JSEncrypt对密码本地存储时加解密 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。

到此这篇关于vue使用JSEncrypt对密码本地存储时加解密的实现的文章就介绍到这了,更多相关vue JSEncrypt密码加解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文