vue中使用Rsa加密
查阅资料得知，这是因为服务端和客户端的脚本不同的原因造成的，下面是解决方法
一、在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加密的方法，希望对大家有所帮助
上一篇
