我要评论vue项目base64加解密及解密乱码
一、vue项目使用base64加解密
1.安装 base64插件：
npm i js-base64 --save
2.页面中引入：
有两种方式：
- (1) import {base64} from ‘js-base64’
- (2) let base64=require(‘js-base64’).base64
3.页面中使用
- 解密 let a=base64.decode(route.query.token)
- 加密 base64.encode(password);
二、解密乱码问题
问题：
后端返回的链接的token里带有加号，使用route.query.token获取到的token里 +号会变成空格，导致解密后部分内容变成乱码。
解决方法：
1.链接是后端返回时，需后端处理，将+号编码变成%2b，再返回链接进行跳转即可
2.链接是前端写的话，可直接使用encodeuricomponent()进行编码，将+号变成%2b，再进行跳转即可
使用base64加密、解密以及des加密、解密
base64加密、解密
- 第一步：
npm install js-base64 --save 下载依赖
- 第二步：
直接引入即可
import { base64 } from 'js-base64';- 第三步：
base64.encode(xxxx)
其中
- .encode() 加密
- .decode() 解密
中间不需要使用加密的key等其他字符
des加密、解密
- 第一步：
npm install crypto-js --save 下载依赖
- 第二步：
引入 ：
import cryptojs from "crypto-js";
- 第三步：
封装一下：
function encryptdes(word, keystr, ivstr) {
keystr = keystr || 'xxxx'
ivstr = ivstr || 'xxxx'
let key = cryptojs.enc.utf8.parse(keystr)
let iv = cryptojs.enc.utf8.parse(ivstr)
let srcs = cryptojs.enc.utf8.parse(word)
let encrypted = cryptojs.des.encrypt(srcs, key, {
iv,
mode: cryptojs.mode.cbc,
padding: cryptojs.pad.pkcs7
})
return encrypted.tostring()
}
// 解密
function decryptdes(word, keystr, ivstr) {
try {
keystr = keystr || 'xxxxx'
ivstr = ivstr || 'xxxx'
var key = cryptojs.enc.utf8.parse(keystr)
let iv = cryptojs.enc.utf8.parse(ivstr)
var decrypt = cryptojs.des.decrypt({ ciphertext: cryptojs.enc.base64.parse(word) }, key, {
iv,
mode: cryptojs.mode.cbc,
padding: cryptojs.pad.pkcs7
})
return decrypt.tostring(cryptojs.enc.utf8)
} catch (err) {
return 'false'
}
}
export { encryptdes, decryptdes };其中 keystr ivstr 需要和后端伙伴统一一下的秘钥
- 第四步：
在组件中使用 decryptdes（xxxx） 即可
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论