vue怎么使用encodeURI加密参数

这篇文章主要介绍“vue怎么使用encodeURI加密参数”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue怎么使用encodeURI加密参数”文章能帮助大家解决问题。

使用encodeURI加密参数

在路由切换时页面需要使用地址栏传参，但地址栏会暴露参数的值，然后想到了encodeURI加密参数

比如参数是一个对象obj

obj：{     id: 1,     name: 'Tom' }

那么需要将参数转换为JSON字符串，在使用encodeURI加密，需要注意的是通过路由跳转的时候会自动解密一次，所以需要加两次密

let param = {          id: 1,         name: 'Tom'       }       param = encodeURI(JSON.stringify(param))       param = encodeURI(param) // 第二次加密       this.$router.push({path: `/record-index-city/${param}`,})

解密方式是使用decodeURI

let param = this.$route.params.param param = JSON.parse(decodeURI(param))

加密后效果：

vue路由加密传参

此处用到的是UrlEncode编码加密，首先创建一个UrlEncode.js,代码如下

const UrlEncode = {    //加密     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 UrlEncode

在main.js中引入，方便调用

import UrlEncode from './assets/js/UrlEncode.js'  Vue.prototype.$UrlEncode = UrlEncode;

我这边用到的是通过路由的path进行传参，感觉加密的话用path传比较好，同时也方便其它端在调用你页面时，获取参数。

传参页面

 this.$router.push({         path: "/PropertyDetails",         query:{           key:this.$UrlEncode.encode(JSON.stringify({             type:'',             id: '',             mobile:'',             productId: '',           }))         }       });

接收页面

let params = JSON.parse(this.$UrlEncode.decode(this.$route.query.key))

关于“vue怎么使用encodeURI加密参数”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。