Vue项目中rsa加密

引言

客户端初始化访问登录服务时，需要以账号和密码作为参数请求后台接口，此时后台响应会展示出详细的账号和密码，为了提高安全性，一般需要对响应中的密码进行加密处理。在这里主要是总结了rsa加密方法。

一、安装`jsencrypt`

npm i jsencrypt

二、引入`jsencrypt`

在 main.js 文件中引入 jsencrypt

import JSEncrypt from "jsencrypt"; //引入模块
Vue.prototype.$jsEncrypt = JSEncrypt; //配置全局变量

三、获取公钥（调接口）

export function getPubKey(data) {
  return http({
    url: "/index/pub-key", //每个项目的接口url不一样 根据实际情况修改
    method: "GET", // 同理
    data
  });
}

四、引入`getPubKey`

在需要加密的组件中引入getPubKey接口，然后进行账号或者密码加密。下面是以登录页面账号、密码加密为例。

1、在login.vue文件中引入getPubKey

import { getPubKey } from "@/api"; //每个项目路径都会有区别

2、登陆时加密

 getPubKey().then(({ result, data: keyData }) => { // getPubKey---获取公钥接口
        if (result) {
          const jse = new this.$jsEncrypt(); // 实例化一个 jsEncrypt 对象
          jse.setPublicKey(keyData); //配置公钥
          let userAccount = jse.encrypt(this.loginForm.user); //加密账号
          let passWord = jse.encrypt(this.loginForm.password); //加密密码
          login({
            userAccount: userAccount,
            passWord: passWord,
          }).then(({ result, message }) => {
            if (result) {
              console.log("登录成功");
              // 登录成功后的操作
            } else {
              // 登录失败操作
              this.loginTextError = message;
            }
          });
        }
      });