在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 插件 任意位置浮动固定层
Dec 25 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
Element Input组件分析小结
Oct 11 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
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高级应用技巧果断收藏
2015/09/25 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
js+html实现周岁年龄计算器
2019/06/25 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
浅谈python中的占位符
2017/11/09 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
浅谈python常用程序算法
2019/03/22 Python
python实现祝福弹窗效果
2019/04/07 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Django中的cookie和session
2019/08/27 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Python爬取梨视频的示例
2021/01/29 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
刊首寄语大全
2014/04/11 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
单位绩效考核方案
2014/05/11 职场文书
2014年度工作总结报告
2014/12/15 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书