在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 技巧
Apr 25 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
js实现二级导航功能
Mar 03 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
微信小程序实现折叠面板
Jan 31 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 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实现的操作excel类详解
2016/01/15 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
nginx下安装php7+php5
2016/07/31 PHP
最佳JS代码编写的14条技巧
2011/01/09 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
浅谈struts1 & jquery form 文件异步上传
2017/05/25 jQuery
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
Python flask框架post接口调用示例
2019/07/03 Python
python pillow模块使用方法详解
2019/08/30 Python
python 实现让字典的value 成为列表
2019/12/16 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
python实现批处理文件
2020/07/28 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
python中@contextmanager实例用法
2021/02/07 Python
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
主持人演讲稿范文
2013/12/28 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
全陪导游词开场白
2015/05/29 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
PyTorch device与cuda.device用法
2022/04/03 Python