vue RSA加解密

#重点在结尾

<template>

  <div>

    <input type="text" v-model="dataForm.username" placeholder="请输入用户名" />

    <input

      type="password"

      v-model="dataForm.password"

      placeholder="请输入密码"

    />

    <button type="submit" @click="submit()">登录</button>

  </div>

</template>

<script>

import JSEncrypt from "jsencrypt"; // 引入jsencrypt库

export default {

  data() {

    return {

      dataForm: {

        username: "312",

        password: "puuu",

        siyao: "",

      },

    };

  },

  created() {

    this.goEncrypt("user:hhahah");

  },

  methods: {

    // 用户登录方法

    submit() {

      this.dataForm.password = this.goEncrypt(this.dataForm.password); // 调用RSA加密方法来加密

      this.$http.post("/url", this.dataForm).then(); // 将加密的内容传给后端

    },

    // RSA加密方法

    goEncrypt(data) {

      const encryptor = new JSEncrypt();

      // 之前生成的公钥↓

      const publicKey =“”

       

      encryptor.setPublicKey(data);

      console.log("加密：" + encryptor.encrypt(publicKey));

      console.log(

        " encryptor.setPublicKey(publicKey);",

        encryptor.setPublicKey(publicKey)

      );

      console.log("ncryptor.encrypt(data)加密", encryptor.encrypt(data));

      this.RSAdecrypt(encryptor.encrypt(data));

      return encryptor.encrypt(data);

    },

    RSAdecrypt(pas) {

      let privateKey =

        "";

      let jse = new JSEncrypt();

      // 私钥

      jse.setPrivateKey(privateKey);

      console.log("解密：" + jse.decrypt(pas));

      return jse.decrypt(pas);

    },

  },

};

</script>

<style scoped></style>

#

1.
openssl genrsa -out rsa_1024_priv.pem 1024 // mac电脑可直接使用终端来输入 windows系统可使用git来输入
2.
cat rsa_1024_priv.pem
3.openssl rsa -pubout -in rsa_1024_priv.pem -out rsa_1024_pub.pem
4.
cat rsa_1024_pub.pem

main.js
import JsEncrypt from 'jsencrypt'
Vue.prototype.$jsEncrypt = JsEncrypt

#