Vue瀏覽器鏈接與接口參數(shù)實現(xiàn)加密過程詳解
場景
由于項目創(chuàng)建之前后端設(shè)計不合理，導致詳情頁鏈接參數(shù)id為順序序數(shù)(例：1,2,3…等等)，安全系數(shù)非常低（雖然我們前端做了菜單權(quán)限、按鈕權(quán)限、Api權(quán)限等等），現(xiàn)在要前端解決下瀏覽器鏈接/接口參數(shù)實現(xiàn)加密????
注：前端鏈接加密與接口參數(shù)加密(get請求)類似
思路過程
1、設(shè)計格式
項目正常鏈接為
contract/draft/contract-draft-detail?id=26197&type=news&key=1667198460529
我們最終需要base64加密成這種（如果不想base64加密也可換成其他加密方式 ??
如：RSA加密、AES加密、MD5加密、SHA256加密以及國密）
contract/draft/contract-draft-detail?__params=eyJpZCI6MjYxOTcsInR5cGUiOiJuZXciLCJrZXkiOjE2NjcxOTg0NjA1Mjl9
要想將參數(shù)加密，我這里設(shè)計的是，將所有參數(shù)以對象的形式進行加密，如圖
正常參數(shù)格式： `id=26197&type=news&key=1667198460529`,
轉(zhuǎn)化成對象: {
id: 26197,
type: 'news',
key: '1667198460529'
}
正常情況下，可直接 $route.query 獲取參數(shù)對象，或 window.location.search 格式化獲取，格式化函數(shù)見下方，
// URL參數(shù)轉(zhuǎn)成對象
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
}
加密后都放到一個參數(shù)中，這里我命名為 __params
2、加/解密方法實現(xiàn)
這里要注意的是base64加密正常是字符串(String類型)進行加密，對對象(Object)進行加密，需要通過JSON.parse進行轉(zhuǎn)義成String類型
代碼如下
/**
* base64(解密)
* @param {String} str 跳轉(zhuǎn)參數(shù)為base64字符串
* @returns
*/
export const decryptBase64 = function(str) {
// 添加decodeURIComponent解決其他特殊字符，如等號(=)會轉(zhuǎn)成%3D，導致base64解密失敗
const decryptQuery = str ? JSON.parse(base64.decode(decodeURIComponent(str))) : {}
return decryptQuery
}
/**
* base64(加密)
* @param {Object || String} param 跳轉(zhuǎn)參數(shù)可以為對象或路徑字符串
* @returns
*/
export const encryptBase64 = function(param) {
const encryptStr = base64.encode(JSON.stringify(param)) || ''
return encryptStr
}
3、加密處理位置
$route.push跳轉(zhuǎn)處
通常咱們在Vue文件下通過 $router.push 進行路由跳轉(zhuǎn)，跳轉(zhuǎn)時需要對參數(shù)進行加密處理，這樣跳轉(zhuǎn)后的鏈接參數(shù)才會以加密的形式進行呈現(xiàn)。有些人可能覺得單獨寫一個方法進行路由跳轉(zhuǎn)，不從 $router.push跳轉(zhuǎn)了，但是我這個項目是中后期項目了，擔心后面其他前端同事不熟悉項目，不知道加密這回事，所以我就在Router.prototype.push 直接進行修改了
代碼如下：
// 在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)
// 解決空對象中含有{__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)
}
路由攔截請求(處理get請求參數(shù))
在路由攔截器請求時，通常會處理一些邏輯。將token放入攜帶的請求頭中等等，所以咱們要將get請求中參數(shù)在此處進行處理。get請求的參數(shù)會和瀏覽器鏈接一樣，在url中，例：
所以我們處理方式與瀏覽器鏈接參數(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)
注：在無參數(shù)時，config中不存在params屬性，所以要初始化一下
4、解密處理位置
在App.vue中初始化一個變量來代替$router.query
watch: {
'$route.query': {
immediate: true,
deep: true,
handler(val) {
if (val.__params) {
const newQuery = decryptBase64(val?.__params)
// 在vue原型上定義一個
Vue.prototype.$route_query = newQuery
return
}
Vue.prototype.$route_query = val || {}
}
}
}
然后咱們只能將整個項目用到$route.query的地方，全局替換下了~~最后使用方式見下方
created() {
this.id = this.$route_query.id
this.getSetTing()
},
小結(jié)
有可能會有人想問，為什么不把 $router.push也替換成全局，而只把 $route.query用一個變量替換？
因為如果不將$route.query替換成另一個變量( $route_query )，沒辦法獲取到解密的參數(shù)(除非一個文件一個文件看著改，而不可以全局替換改)。我當時嘗試在路由守衛(wèi)和路由鉤子函數(shù)里想要處理 $route.query中的參數(shù)，但是發(fā)現(xiàn)這個是一個只讀的屬性，不可以中途改變值。
不把 $router.push也替換成全局，是為了方便后續(xù)其他同事在開發(fā)時，不需要注意加密參數(shù)了，push自動格式化參數(shù)成加密。
到此這篇關(guān)于Vue瀏覽器鏈接與接口參數(shù)實現(xiàn)加密過程詳解的文章就介紹到這了,更多相關(guān)Vue鏈接加密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js 是一個流行的前端JavaScript框架,用于構(gòu)建用戶界面,在這個"vue網(wǎng)頁登錄界面"的示例中,我們探討的是如何使用Vue.js創(chuàng)建一個簡單的登錄頁面,感興趣的小伙伴跟著小編一起來看看吧2025-04-04
這篇文章主要介紹了vue-drag-resize與輸入框/文本框沖突問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決在Vue中使用axios用form表單出現(xiàn)的問題
今天小編就為大家分享一篇解決在Vue中使用axios用form表單出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了詳解如何用模塊化的方式寫vuejs，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了vue 行為驗證碼之滑動驗證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復制到所使用的components目錄下，本文給大家詳細講解，需要的朋友可以參考下2023-05-05
vue3中定義全局指令時,往往會碰到一個問題：事件無法解綁,為什么會這樣,因為通常在指令的mounted鉤子中綁定事件,事件處理函數(shù)也定義在mounted中,本文講給大家講講vue3中addEventListener的妙用,需要的朋友可以參考下2023-08-08
antd Form組件方法getFieldsValue獲取自定義組件的值操作
這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細介紹了Vue使用video標簽實現(xiàn)視頻播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了基于Vue實現(xiàn)微前端的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
登錄功能對于前端剛?cè)腴T不久的同學來說較為困難,下面這篇文章主要給大家介紹了關(guān)于Vue登錄功能實現(xiàn)(含封裝axios)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12