首页 > 其他分享 >vue.js客服系统实时聊天项目开发(十七)解决url get传参后进行base64解密问题

vue.js客服系统实时聊天项目开发(十七)解决url get传参后进行base64解密问题

时间:2023-02-02 14:12:18浏览次数:43  
标签:vue 20 get url 传参后 js base64 str

有些参数需要在url的GET里传递,但是为了防止特殊字符问题,我转成了base64编码。

但是js进行解码的时候,总是报错:

报错: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

 

这是因为base64在url中会进行url编码,+号会被转成%20

这就需要我们在拿到get参数后,进行url解码,js自带的解码函数会把%20转成空格,这时就会转码失败

下面函数是一些兼容处理

function urlDecode(str) {
  return decodeURIComponent(str.replace(/\%20/g, '+'));
}
// Base64解密
function b64DecodeUnicode(str) {
    str=urlDecode(str);
  return decodeURIComponent(atob(str.replace(/\_/g, '/').replace(/\-/g, '+'))
    .split('')
    .map(function (c) {
      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    })
    .join(''));
}

 

标签:vue,20,get,url,传参后,js,base64,str
From: https://www.cnblogs.com/taoshihan/p/17085805.html

相关文章

  • 解决vite+vue3混合开发白屏问题
    开发环境:vite4.0+vue3.2使用场景:vite打包后将包嵌入app使用。问题描述:打包后app显示白屏。解决方案:默认的构建目标是能支持原生ESM语法的script标签、原生ESM动态导......
  • vue 获取 DOM 元素的方法
    1.原生js获取DOM节点document.querySelector(选择器)document.getElementById(id选择器)document.getElementsByClassName(class选择器)....2.vue2中获取当前组......
  • 快速上手vue前端存储库、全局状态管理工具pinia
    pinia是什么,为什么我们要使用pinia?pinia是vue全局状态管理工具,类似vueX,用于全局的数据状态存储、修改变更等等相较于vueX,pinia的使用较为简单,轻量级,上手容易,干掉了vue......
  • 总结了 Vue3 的七种组件通信方式,别再说不会组件通信了
    总结了Vue3的七种组件通信方式,别再说不会组件通信了播报文章网格化软件高品伟业2022-04-1916:35山东关注 写在前面  本篇文章是全部采用的......
  • vue-plugin-hiprint
    vue-plugin-hiprint(基于hiprint2.5.4)当时只是为了方便我(并非hiprint原作者)在vue项目中引入使用,所以以此命名。此插件仅仅是一个JavaScript【工具库】而非Vue【组件库......
  • ts找不到 ./APP.vue
    在使用vue3+ts中遇到如下问题解决方法:查看跟App.vue同级目录有没有env.d.ts文件,如果有则给里面添加以下代码declaremodule"*.vue"{importtype{DefineComp......
  • JavaScript 中URL构造函数
    前言URL对于我们开发人员来讲,应该是非常熟悉了。在对URL进行参数拼接时,我们一般都会直接进行字符串拼接或使用模版字符串,因为这样非常方便,但是我们这样其实会在不知不觉......
  • 最好用的 6 款 Vue 拖拽组件库推荐
    Vue拖拽组件库(drag-and-drop)组件在使用Vue框架开发中非常常见的需求,做个内容行排序,拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过的6款Vue拖拽......
  • Vue3 安裝v-viewer
    一、执行命令npminstallv-viewer@next二、在main.js中引入//v-viewer:图片预览、缩放、翻转import'viewerjs/dist/viewer.css'importViewerfrom'v-viewer' ......
  • vue2实现虚拟列表
    1.vue-virtual-scroll-list插件这个插件就是vue中的一个长列表的插件,官网地址:https://tangbc.github.io/vue-virtual-scroll-list/#/来看一下该组件的渲染情况:可......