vue 路由传参加密解密

巨蟹座守护骑士

已于 2023-12-22 17:55:15 修改

阅读量731

点赞数 1

分类专栏： vue2 文章标签： vue.js 前端 javascript

于 2023-05-30 19:05:36 首次发布

原文链接：https://www.jianshu.com/p/3d9b254a750d

版权

vue2 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

新建一个base64.js文件复制进去以下代码

const Base64 = {
    //加密
     encode(str) {
         return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
             function toSolidBytes(match, p1) {
                 return String.fromCharCode('0x' + p1);
             }));
     },
   //解密
     decode(str) {
         // Going backwards: from bytestream, to percent-encoding, to original string.
         return decodeURIComponent(atob(str).split('').map(function (c) {
             return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
         }).join(''));
     }
 }
 export default Base64

在需要的地方引用或者挂载到全局

单页面

import Base64 from '@/tool/base64.js'

在main.js里面引用，

import Base64 from './assets/js/base64.js'

Vue.prototype.$Base64 = Base64;

使用this.$Base64.方法名调用

<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
import { useRoute } from "vue-router";
import Base64 from '@/tool/base64.js'
onBeforeMount(() => {
    const route = useRoute();
    // console.log(route.params, route.params.id); // 地址栏参数
    console.log("参数", Base64.decode(route.params.id));
    // 加密
         console.log(Base64.encode("10")); // MTA=
    // 解密
         console.log(Base64.decode(route.params.id)); // 10
})
</script>

在跳转路由之前把参数加密拼接上去跳转(只加密参数)

加密之后的参数