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加密參數”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。