首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue项目base64加解密及解密乱码

vue项目base64加解密使用方式以及解密乱码

2024-05-16 10:53:26 作者：mewmew1

这篇文章主要介绍了vue项目base64加解密使用方式以及解密乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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）即可

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。