在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 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
JavaScript实现简单验证码
Aug 24 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
Laravel 实现数据软删除功能
2019/08/21 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python读写文件方法总结
2015/06/09 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
python3中property使用方法详解
2019/04/23 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
建筑专业毕业生推荐信
2013/11/21 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
快餐公司创业计划书
2014/04/29 职场文书
司机岗位职责说明书
2014/07/29 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
邀请函范文
2015/02/02 职场文书