Vue之路由的query传参加密

在vue项目里，怕刷新页面丢失参数常用query代替params，即

this.$router.push({
  path:'/user/Recommend',
  query:{
     referrerPhone:XXXXX
  }
})

这样在浏览器刷新，参数仍然跟在路由后面，不会丢失。但这样又遇到其他问题了，一般不像刷新丢失的数据，肯定是至关重要的，也是敏感的，那怎么办呢，就想到了把参数加个密，这边加密方式用的是Base64。

首先，创建一个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

在main.js里面引用，

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

Vue.prototype.$Base64 = Base64;

那咱们在前一个传参页面这样使用，

this.$router.push({
  path: "/user/Recommend",
  query:{
    info:this.$Base64.encode(JSON.stringify({
      name:'',
      id: '',
      mobile:'',
      numId: '',
    }))
  }
});

或者直接：

this.$router.push({
  path: "/user/Recommend",
  query:{
    info:this.$Base64.encode(XXXXX)
  }
});

接收参数的页面；

let params = JSON.parse(this.$Base64.decode(this.$route.query.info))

如此甚好，至少敏感数据不会泄露。

如有问题请指正，欢迎提供更好方法。