视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2020-11-27 21:58:24 责编:小采
文档

项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用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对数据进行加密传输的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

下载本文
显示全文
专题