Vue如何给路由中的query传参进行加密

常用的路由跳转方式

this.$router.push({
  path:'/page',
  query:{
     info:.....
  }
})

因为query的参数会在url中展示，有时会比较敏感，所有我们可以通过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

• 全局引用

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

• 路由跳转使用

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

• 接收的参数转换

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