RSA加密工具，从后台获取公钥对数据进行加密再传输，保护敏感数据。


简介

RSA是被研究得最广泛的公钥算法，从提出到现在已近三十年，经历了各种攻击的考验，逐渐为人们接受，普遍认为是目前最优秀的公钥方案之一。

RSA公开密钥密码体制是一种使用不同的加密密钥与解密密钥，“由已知加密密钥推导出解密密钥在计算上是不可行的”密码体制。

在公开密钥密码体制中，加密密钥（即公开密钥）PK是公开信息，而解密密钥（即秘密密钥）SK是需要保密的。加密算法E和解密算法D也都是公开的。虽然解密密钥SK是由公开密钥PK决定的，但却不能根据PK计算出SK。


安装

加密工具，jsencrypt。

cdn引入：

<script src=""></script>

npm或cnpm下载：

//1.安装依赖   
cnpm install jsencrypt --save
//在main.js引入   
import { JSEncrypt } from 'jsencrypt'


使用

配置

某项目中jsencrypt的配置如下（main.js文件）：

  • 加密函数，挂载到VUE原形上（prototype属性可以向对象中添加属性或方法），后续通过$encryptedData调用。
  • 获取公钥函数，挂载到VUE原形上，后续通过$getPublicKey调用。
  • 获取到的公钥，保存在$publickey中，挂载在VUE原形上。
  • 注意：要使用elementui的弹窗组件（获取公钥函数中有使用到），需要保证下边的配置在elementui的import之后。
//在main.js中挂载全局方法：
//使用时调用Vue的函数[this|Vue].$encryptedData即可。
Vue.prototype.$encryptedData = function(publicKey, data) {//参数为公钥、待加密的数据
  //new一个对象
  let encrypt = new JSEncrypt();
  //设置公钥
  encrypt.setPublicKey(publicKey);
  //data是要加密的数据
  let result = encrypt.encrypt(data);
  return result
}
Vue.prototype.$getPublicKey = function() {//获取RSA公钥，挂载到Vue上，可通过this.$getPublicKey调用
  axios({//在前边得将Axios导入为axios,这里才可以调用
      method: 'get',
      url: '/publickey',//前边得配置了全局URL才能正常发起Ajax请求
      responseType: 'text'
    })
    .then(response => {
      Vue.prototype.$publickey = response.data;//将获取到得公钥，又保存在Vue原形上的自定义变量$publickey上
    })
    .catch(err => {
      elementui.Message.error(err.message);//在前边得将ElementUI导入为elementui,这里才可以调用
    });
}



vue页面应用

//1.在钩子函数created中向服务器获取公钥：
  created() {
    this.$getPublicKey();
  }

//2.在发起Ajax请求时，将用户名和密码加密再发送给服务器：
  //登录
  this.$http({
      method: 'post',
      url: '/accounts/token',
      responseType: 'json',
      data: {
        username: this.$encryptedData(this.$publickey, this.loginForm.username.trim()),
        password: this.$encryptedData(this.$publickey, this.loginForm.password.trim())
      }
    })
    .then(respon => { //Ajax 请求成功
      this.loading = false; //关闭 加载动画
      var data = respon.data;
      if (data.meta.status != "200") {
        this.shake(this.isShakeForm); //表单 摇晃动画
        this.$message.error(data.meta.msg);
      } else {
        this.$message.success('登录成功');
        // 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; localStorage中是持久化的保存
        //   1.1 项目中出现了登录之外的其他API接口，必须在登陆之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
        window.sessionStorage.setItem('token', data.token);
        window.sessionStorage.setItem('account', JSON.stringify(data.account));

        // 2、通过编程式导航跳转到后台主页, 路由地址为：/home
        this.$router.push('/home');
      }
    })
    .catch(err => { //Ajax 请求出错
      this.loading = false; //关闭 加载动画
      this.$message.error(err.message);
      this.shake(this.isShakeForm); //表单 摇晃动画
    });