vue使用encodeURI加密参数
Hello攻城狮 人气:0使用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))
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容