首页 / 大前端 / vue中使用Rsa加密

vue中使用Rsa加密

2021-01-14 01:14 大前端 阅读 6869 来源

查阅资料得知,这是因为服务端和客户端的脚本不同的原因造成的,下面是解决方法


一、在nuxt.config.js中配置vendor

找到build加入vendor配置项

build: {
  vendor: ['external_library'],
},


二、在plugins文件夹中新建文件Rsa.js

使用Rsa加密需要用到jsencrypt安装包,在这里我们先进行安装

npm i jsencrypt --save-dev

安装完成后我们要在引入、加密、解密进行判断,区分客户端和服务端的打包加载,完整代码如下

if (process.browser) {
  const { JSEncrypt } = require('jsencrypt')
  function encrypt(str) {
    const encrypt = new JSEncrypt()
    encrypt.setPublicKey(`公钥`)
    const encrypted = encrypt.encrypt(str)
    return encrypted
  }

  // 解密方法
  function decrypt(str) {
    const decrypt = new JSEncrypt()
    decrypt.setPrivateKey(`秘钥`)
    const uncrypted = decrypt.decrypt(str)
    return uncrypted
  }

  module.exports = { encrypt, decrypt }
}


三、在模板中使用

<template>
  <div>
    <h1>this is test vue!!!</h1>
  </div>
</template>

<script>
import Rsa from '~/plugins/Rsa'
export default {
  mounted() {
    Rsa.encrypt()
    Rsa.decrypt()
  },
}
</script>

<style scoped></style>


第三步非常简单,只需要我们把要加密或者解密的值放入相应的函数中就可以了


以上就是nuxtjs使用Rsa加密的方法,希望对大家有所帮助


猜你喜欢