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组合式API浅显入门示例详解
这篇文章主要为大家介绍了vue组合式API浅显入门示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解
计算属性就是 Vue 实例选项中的 computed，computed 的值是一个对象类型，对象中的属性值为函数，而且这个函数没办法接收参数，这篇文章主要介绍了Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解,需要的朋友可以参考下
2022-11-11
vue3 setup语法糖中获取slot插槽的dom对象代码示例
slot元素是一个插槽出口,标示了父元素提供的插槽内容将在哪里被渲染,这篇文章主要给大家介绍了关于vue3 setup语法糖中获取slot插槽的dom对象的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
Vue中实现过渡动画效果示例代码
这篇文章主要介绍了Vue中实现过渡动画效果示例代码,Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果，需要的朋友可以参考下
2022-08-08
vue实现自定义全局右键菜单
这篇文章主要为大家详细介绍了vue实现自定义全局右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue、react等单页面项目部署到服务器的方法及vue和react的区别
这篇文章主要介绍了vue、react等单页面项目部署到服务器的方法,需要的朋友可以参考下
2018-09-09
Vue-CLI与Vuex使用方法实例分析
这篇文章主要介绍了Vue-CLI与Vuex使用方法,结合实例形式分析了Vue-CLI创建项目与Vuex相关概念、使用方法及操作注意事项,需要的朋友可以参考下
2020-01-01
Vue 动态生成数据字段的实例
这篇文章主要介绍了Vue 动态生成数据字段的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
element日期选择器el-date-picker样式图文详解
最近写的项目里面有一个功能是日期选择功能,第一反应是使用element里面的el-date-picker组件,下面这篇文章主要给大家介绍了关于element日期选择器el-date-picker样式的相关资料,需要的朋友可以参考下
2022-09-09
element中使用formdata进行上传文件的方法
本文主要介绍了elementUI中使用formdata进行上传文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03