場(chǎng)景

由于項(xiàng)目創(chuàng)建之前后端設(shè)計(jì)不合理，導(dǎo)致詳情頁(yè)鏈接參數(shù)id為順序序數(shù)(例：1,2,3…等等)，安全系數(shù)非常低（雖然我們前端做了菜單權(quán)限、按鈕權(quán)限、Api權(quán)限等等），現(xiàn)在要前端解決下瀏覽器鏈接/接口參數(shù)實(shí)現(xiàn)加密????

注：前端鏈接加密與接口參數(shù)加密(get請(qǐng)求)類(lèi)似

思路過(guò)程

1、設(shè)計(jì)格式

項(xiàng)目正常鏈接為

contract/draft/contract-draft-detail?id=26197&type=news&key=1667198460529

我們最終需要base64加密成這種（如果不想base64加密也可換成其他加密方式 ??

如：RSA加密、AES加密、MD5加密、SHA256加密以及國(guó)密）

contract/draft/contract-draft-detail?__params=eyJpZCI6MjYxOTcsInR5cGUiOiJuZXciLCJrZXkiOjE2NjcxOTg0NjA1Mjl9

要想將參數(shù)加密，我這里設(shè)計(jì)的是，將所有參數(shù)以對(duì)象的形式進(jìn)行加密，如圖

正常參數(shù)格式： `id=26197&type=news&key=1667198460529`,
轉(zhuǎn)化成對(duì)象:  {
    id: 26197,
    type: 'news',
    key: '1667198460529'
}

正常情況下，可直接 $route.query 獲取參數(shù)對(duì)象，或 window.location.search 格式化獲取，格式化函數(shù)見(jiàn)下方，

// URL參數(shù)轉(zhuǎn)成對(duì)象
export function urlPasseObj(url = '', isUrl) {
  const result = url.split('?')[isUrl ? 1 : 0]
  if (!result) {
    return {}
  }
  const list = result.split('&')
  const obj = {}
  list.map(item => {
    if (item) {
      const arr = item.split('=')
      const value = arr[1]
      obj[arr[0]] = value === undefined ? '' : value
    }
  })
  return obj
}

加密后都放到一個(gè)參數(shù)中，這里我命名為 __params

2、加/解密方法實(shí)現(xiàn)

這里要注意的是base64加密正常是字符串(String類(lèi)型)進(jìn)行加密，對(duì)對(duì)象(Object)進(jìn)行加密，需要通過(guò)JSON.parse進(jìn)行轉(zhuǎn)義成String類(lèi)型

代碼如下

/**
 * base64(解密)
 * @param {String} str 跳轉(zhuǎn)參數(shù)為base64字符串
 * @returns
 */
export const decryptBase64 = function(str) {
  // 添加decodeURIComponent解決其他特殊字符，如等號(hào)(=)會(huì)轉(zhuǎn)成%3D，導(dǎo)致base64解密失敗
  const decryptQuery = str ? JSON.parse(base64.decode(decodeURIComponent(str))) : {}
  return decryptQuery
}
/**
 * base64(加密)
 * @param {Object || String} param 跳轉(zhuǎn)參數(shù)可以為對(duì)象或路徑字符串
 * @returns
 */
export const encryptBase64 = function(param) {
  const encryptStr = base64.encode(JSON.stringify(param)) || ''
  return encryptStr
}

3、加密處理位置

$route.push跳轉(zhuǎn)處

通常咱們?cè)赩ue文件下通過(guò) $router.push 進(jìn)行路由跳轉(zhuǎn)，跳轉(zhuǎn)時(shí)需要對(duì)參數(shù)進(jìn)行加密處理，這樣跳轉(zhuǎn)后的鏈接參數(shù)才會(huì)以加密的形式進(jìn)行呈現(xiàn)。有些人可能覺(jué)得單獨(dú)寫(xiě)一個(gè)方法進(jìn)行路由跳轉(zhuǎn)，不從 $router.push跳轉(zhuǎn)了，但是我這個(gè)項(xiàng)目是中后期項(xiàng)目了，擔(dān)心后面其他前端同事不熟悉項(xiàng)目，不知道加密這回事，所以我就在Router.prototype.push 直接進(jìn)行修改了

代碼如下：

// 在router/index.js中修改
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  // 解決空對(duì)象中含有{__ob__: Observer}，深拷貝
  let newLocation = deepCopy(location)
  if (newLocation?.query && Object.keys(newLocation.query).length !== 0) {
    newLocation = location.query?.__params ? location : {
      ...location,
      query: {
        __params: encryptBase64(newLocation.query)
      }
    }
  }
  return originalPush.call(this, newLocation).catch(err => err)
}

路由攔截請(qǐng)求(處理get請(qǐng)求參數(shù))

在路由攔截器請(qǐng)求時(shí)，通常會(huì)處理一些邏輯。將token放入攜帶的請(qǐng)求頭中等等，所以咱們要將get請(qǐng)求中參數(shù)在此處進(jìn)行處理。get請(qǐng)求的參數(shù)會(huì)和瀏覽器鏈接一樣，在url中，例：

所以我們處理方式與瀏覽器鏈接參數(shù)處理方式一樣，具體實(shí)現(xiàn)方法如下，

request.interceptors.request.use(config => {
   if (config.method === 'get') {
    config.data = true
    // 判斷是否有攜帶參數(shù)
    const isHash = config.url.includes('?')
    if (isHash) {
      // 將url上的參數(shù)調(diào)整到params中，然后調(diào)整清除url上的參數(shù)
      // urlPasseObj方法在上方
      const urlParam = urlPasseObj(config.url, true)
      config.params = config.params ? { ...config.params, ...urlParam } : urlParam
      config.url = config.url.split('?')[0]
    }
    if (config.params) {
      config.params = {
        __params: encryptBase64(config.params)
      }
    }
  }
  return config
}, errorHandler)

注：在無(wú)參數(shù)時(shí)，config中不存在params屬性，所以要初始化一下

4、解密處理位置

在App.vue中初始化一個(gè)變量來(lái)代替$router.query

watch: {
   '$route.query': {
     immediate: true,
     deep: true,
     handler(val) {
       if (val.__params) {
         const newQuery = decryptBase64(val?.__params)
         // 在vue原型上定義一個(gè)
         Vue.prototype.$route_query = newQuery
         return
       }
       Vue.prototype.$route_query = val || {}
     }
   }
 }

然后咱們只能將整個(gè)項(xiàng)目用到$route.query的地方，全局替換下了~~最后使用方式見(jiàn)下方

created() {

this.id = this.$route_query.id

this.getSetTing()

},

小結(jié)

有可能會(huì)有人想問(wèn)，為什么不把 $router.push也替換成全局，而只把 $route.query用一個(gè)變量替換？

因?yàn)槿绻粚?route.query替換成另一個(gè)變量( $route_query )，沒(méi)辦法獲取到解密的參數(shù)(除非一個(gè)文件一個(gè)文件看著改，而不可以全局替換改)。我當(dāng)時(shí)嘗試在路由守衛(wèi)和路由鉤子函數(shù)里想要處理 $route.query中的參數(shù)，但是發(fā)現(xiàn)這個(gè)是一個(gè)只讀的屬性，不可以中途改變值。

不把 $router.push也替換成全局，是為了方便后續(xù)其他同事在開(kāi)發(fā)時(shí)，不需要注意加密參數(shù)了，push自動(dòng)格式化參數(shù)成加密。

到此這篇關(guān)于Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過(guò)程詳解的文章就介紹到這了,更多相關(guān)Vue鏈接加密內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論