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对密码本地存储时加解密 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕文章来源地址https://www.toymoban.com/news/detail-597470.html

到了这里,关于vue-使用JSEncrypt对密码本地存储时加解密的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue使用jsencrypt实现rsa前端加密

    介绍 vue 完成 rsa 加密传输, jsencrypt 实现参数的前端加密 在 utils 文件夹中新建 jsencrypt.js 文件,内容如下: 注意点:一般公钥都是后端生成好的,之间给到前端,需要注意的需要让后端把生成的公钥放入 .txt 文件中。把 .txt 文件给前端,否则可能会出现无法使用的可能

    2024年02月09日
    浏览(57)
  • RSAUtil 前端 JavaScript JSEncrypt 实现 RSA (长文本)加密解密

    文章归档:https://www.yuque.com/u27599042/coding_star/cl4dl599pdmtllw1 import JSEncrypt from ‘jsencrypt’ import {stringIsNull} from “@/utils/string_utils.js”:https://www.yuque.com/u27599042/coding_star/slncupw7un3ce7cb import {isNumber} from “@/utils/number_utils.js”:https://www.yuque.com/u27599042/coding_star/tuwmm3ghf5lgo4bw 注意: 此方

    2024年04月22日
    浏览(69)
  • 前端本地存储方案-localForage-vue3中使用

    前端有多种本地存储方案可供选择,常见的有: Cookie:小型的文本文件,存储少量数据 Web Storage :包括:localStorage和sessionStorage,存储数据有上限(5M)左右 IndexedDB:一种高级的客户端存储API,存储量大、高版本浏览器兼容性较好 这些本地存储方案各有优缺点,近期发现一

    2024年02月02日
    浏览(47)
  • 若依基于jsencrypt实现前后端登录密码加密

    若依虽然有加密解密功能,然后只有前端有,在用户点击保存密码的时候,会将密码保存到本地,但是为了防止密码泄露,所以在保存的时候,进行加密,在回显密码的时候进行解密显示,用户在登录的时候密码照样会明文传输,我们可以使用,为了解决这个问题,我们可以

    2024年01月17日
    浏览(47)
  • 10 使用Vue+axios+Vuex实现登录后前端数据本地化存储实战

    这已经是《 Vue + SpringBoot前后端分离项目实战 》专栏的前端部分第8篇博客了, 服务端部分 由天哥(天哥主页)负责,目前专栏目录如下: Vue + SpringBoot前后端分离项目实战 - 前端部分 1. 手把手带你做一套毕业设计-征程开启 2. 我应该把毕业设计做到什么程度才能过关? 3

    2024年02月16日
    浏览(41)
  • vue前端实现登录时加验证码

    vue移动端(PC端)图形验证码 vue2-verify 地址:vue2-verify的npmjs地址 安装使用: 支持的验证码类型: 常规验证码picture 常规的验证码由数字和字母构成,用户输入不区分大小写,可变形成汉字验证。 运算验证码compute 运算验证码主要通过给出数字的加减乘运算,填写运算结果进

    2024年02月07日
    浏览(36)
  • 使用Mavon-Editor编辑器上传本地图片到又拍云云存储(Vue+SpringBoot)

    需求:将本地的图片上传到服务器或者云存储中,考虑之后,这里我选的是上传到又拍云云存储。 原理:Mavon-Editor编辑器有两个重要的属性和事件 所以需要将用到Mavon-Editor编辑器的组件中添加上这个属性和事件。 然后在方法中定义imgAdd函数 代码片段: 其中请求路径是你自

    2024年02月12日
    浏览(55)
  • Android开发----实现登录注册页面(创建本地数据库,对注册的账户密码进行存储)

    写在前面: 本文实现了登录注册页面的开发,创建了本地数据库,存储注册的账户密码。注册账户为手机号,对账户为手机号进行了正则化验证。登录成功跳转至主页面。 20221028-实现登录注册功能 首先说一下,项目部署是在原有项目新建两个activity( 项目右键–new–activi

    2024年02月03日
    浏览(58)
  • 前端使用AES密码加密、解密,使用详细(crypto加密解密,前后端分离,AES加密解密)

    1、 首先安装 crypto-js插件,安装命令如下:    -S等同于--save,保存在package.json文件中,是在dependencies 下, --save安装包信息将加入到dependencies(生产环境)中,生产阶段的依赖,也就是项目运行时的依赖,就是程序上线后仍然需要依赖; -D等同于--save-dev,也保存在package.j

    2024年02月11日
    浏览(63)
  • vue pc端项目el-upload上传图片时加水印

    html代码: 画布这时就需要在beforeUploadHandle这个方法中去生成水印,然后通过后端上传接口,把图片传给后端,然后再接收后端返回的数据 下面是beforeUploadHandle方法

    2024年02月13日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包