Vue项目中集成jsencrypt实现密码加密传输

Vue项目中集成jsencrypt实现密码加密传输

在开发需求中，为了保障用户登录时的密码安全，经过调研并与后端团队协商后，决定采用jsencrypt.js库进行数据加密传输。

该库的GitHub仓库地址为：https://github.com/travist/js...

安装与引入

首先，在Vue项目中通过yarn命令安装该依赖库。

yarn add jsencrypt --dep

或者，也可以使用npm命令进行安装。

npm install jsencrypt --dep

安装完成后，需要在代码中引入jsencrypt模块。

import { JSEncrypt } from 'jsencrypt'

为了便于在项目中多处调用，建议将加密功能封装为全局混入（Mixin）。

公钥由后端提供；若前端需解密数据，则需后端提供私钥。本文示例仅封装了加密逻辑。

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...

Vue配置补充说明

以下补充说明在Vue中配置jsencrypt对密码进行加密的具体步骤。

第一步是安装相关依赖。

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进行数据加密传输的方法，希望能为读者提供帮助。如有疑问，欢迎留言，小编会及时回复。