vue 跳转地址栏参数加密

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) {
    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 './utils/UrlEncode'
Vue.prototype.$UrlEncode = UrlEncode

我这边用到的是通过路由的path进行传参，打开新窗口

const new1 = this.$router.resolve({
          path: '/remoteLogin',
          query: {
            key: this.$UrlEncode.encode(JSON.stringify({
              id: item.id,
              location: item.location,
              username: item.username,
              password: item.password,
              name: item.name,
              guacUrl: guacUrl
            }))
          }
        })
        window.open(new1.href, '_blank')

接收页面

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