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

更新时间：2024年05月16日 10:53:25 作者：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）即可

总结

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

您可能感兴趣的文章:

Vue实现多图添加显示和删除
这篇文章主要为大家详细介绍了Vue实现多图添加显示和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue3项目打包成apk(android)详细图文教程
Vue本身是一个构建用户界面的渐进式框架,不能直接打包成APK文件,但是你可以使用工具将Vue应用打包成一个可以在Android设备上安装的APK文件,这篇文章主要给大家介绍了关于vue3项目打包成apk(android)的相关资料,需要的朋友可以参考下
2024-05-05
vue3输入单号和张数如何自动生成连号的单号
最近遇到这样的需求输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号,本文重点介绍vue3输入单号和张数,自动生成连号的单号,感兴趣的朋友一起看看吧
2024-02-02
vue 实现锚点功能操作
这篇文章主要介绍了vue 实现锚点功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
详解基于vue-router的动态权限控制实现方案
本篇文章主要介绍了详解基于vue-router的动态权限实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue实现弹窗引用另一个页面窗口
这篇文章主要介绍了vue实现弹窗引用另一个页面窗口，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue.js自定义指令的基本使用详情
这篇文章主要介绍了Vue.js自定义指令的基本使用详情,文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下
2022-05-05
在Vue3.x中实现类似React.lazy效果的方法详解
React 的 React.lazy 功能为组件懒加载提供了原生支持,允许开发者将组件渲染推迟到实际需要时再进行,虽然 Vue3.x 没有一个直接对应的 lazy 函数,但我们可以通过动态导入和 defineAsyncComponent 方法来实现类似的效果,需要的朋友可以参考下
2024-03-03
vue如何截取字符串
这篇文章主要介绍了vue如何截取字符串，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式)
这篇文章主要介绍了vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05