在Vue项目中使用jsencrypt.js对数据进行加密传输的方法


Posted in Javascript onApril 17, 2019

项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js。

jsencrypt.js的github地址: https://github.com/travist/js...

使用yarn安装至Vue项目

yarn add jsencrypt --dep

或者使用npm

npm install jsencrypt --dep

引入jsencrypt

import { JSEncrypt } from 'jsencrypt'

可封装为全局混合,便于调用

公钥为后端提供,如前端需要解密数据,则需要后端提供私钥。此处只封装了加密。

methods: {
 // 加密
 encryptedData(publicKey, data) {
  // 新建JSEncrypt对象
  let encryptor = new JSEncrypt();
  // 设置公钥
  encryptor.setPublicKey(publicKey);
  // 加密数据
  return encryptor.encrypt(data);
 }
 }

调用函数加密,此处的公钥是我从后端那获取的,然后加密密码

encryptedPassword = this.encryptedData(publicKey, password);

即完成加密。

更多使用可查阅官方文档 http://travistidwell.com/jsen...

PS:下面看下jsencrypt 配置对密码进行加密(vue)

安装

npm i node-jsencrypt

在script下导入

// 引入加密模块,对密码进行处理
const JSEncrypt = require('jsencrypt');

引用

一般情况下,后台会给一个获取公钥的接口来进行转换

methods: {
  init() {
   // 发送请求,获取公钥
   getKey().then(res => {
    this.gongKey = res.data.data; // 获取到公钥
    // 传入所请求回来的公钥,对密码进行处理
    // 实例化加密对象
    var crypt = new JSEncrypt.JSEncrypt({
     default_key_size: 1024
    });
    crypt.setPublicKey(this.gongKey);
    // 拿到加密明文
    let passWord = crypt.encrypt(obj.value);
   });
  }
 }

总结

以上所述是小编给大家介绍的在Vue项目中使用jsencrypt.js对数据进行加密传输的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
js实现返回顶部效果
Mar 10 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 #Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 #Javascript
Vue源码探究之虚拟节点的实现
Apr 17 #Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 #Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 #Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 #Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 #Javascript
You might like
一些常用的php简单命令代码集锦
2007/09/24 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
详解Python多线程
2016/11/14 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
安装python及pycharm的教程图解
2019/10/10 Python
python实现随机加减法生成器
2020/02/24 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
django queryset相加和筛选教程
2020/05/18 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
EJB的基本架构
2016/09/22 面试题
入党积极分子思想汇报
2014/01/02 职场文书
事假请假条范文
2014/04/11 职场文书
社会调查研究计划书
2014/05/01 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
Python Flask实现进度条
2022/05/11 Python