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加密的方法,希望对大家有所帮助