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

总结

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

您可能感兴趣的文章:

vue3使用element-plus搭建后台管理系统之菜单管理功能
这篇文章主要介绍了vue3使用element-plus搭建后台管理系统之菜单管理,使用element-plus el-tree组件快速开发树形菜单结构，el-tree组件中filter-node-method事件便可以实现树形菜单筛选过滤功能，需要的朋友可以参考下
2022-04-04
vue实现弹窗拖拽效果
这篇文章主要为大家详细介绍了vue实现弹窗拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
vue使用天地图、openlayers实现多个底图叠加显示效果
这篇文章主要介绍了vue使用天地图、openlayers实现多个底图叠加显示,根据返回的经纬度列表通过天地图、openlayers实现底图添加，本文通过示例代码给大家介绍的非常详细，需要的朋友参考下吧
2022-04-04
vue3中ace-editor的简单使用方法实例
这篇文章主要给大家介绍了关于vue3中ace-editor简单使用的相关资料,ace-editor是一种代码编辑器,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
组件中多个el-upload存在导致上传图片失效的问题及解决
这篇文章主要介绍了组件中多个el-upload存在导致上传图片失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
基于Vue3+西瓜视频播放器(xgplayer)移动端直播解决方案
在现代前端开发中,视频播放功能越来越常见,从在线教育到娱乐平台都离不开高质量的视频播放器,这篇文章主要介绍了基于Vue3+西瓜视频播放器(xgplayer)移动端直播的相关资料,需要的朋友可以参考下
2026-02-02
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
今天小编就为大家分享一篇vue利用v-for嵌套输出多层对象,分别输出到个表的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue3 父控件远程获取数据在子组件上显示不出来的解决方案
这篇文章主要介绍了vue3 父控件远程获取数据，在子组件上显示不出来，本文给大家分享两种解决方案帮助大家解决这个问题,需要的朋友可以参考下
2023-08-08
一起写一个即插即用的Vue Loading插件实现
这篇文章主要介绍了一起写一个即插即用的Vue Loading插件实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
详解vue-cli3多环境打包配置
这篇文章主要介绍了vue-cli3多环境打包配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03