Vue瀏覽器鏈接與接口參數(shù)實(shí)現(xiàn)加密過(guò)程詳解
場(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)求)類似
思路過(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類型)進(jìn)行加密,對(duì)對(duì)象(Object)進(jìn)行加密,需要通過(guò)JSON.parse進(jìn)行轉(zhuǎn)義成String類型
代碼如下
/** * 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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項(xiàng)目實(shí)例中用query傳參如何實(shí)現(xiàn)跳轉(zhuǎn)效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享
這篇文章主要為大家介紹了Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue3?錨點(diǎn)定位的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue3?多種方法的錨點(diǎn)定位,使用?Vue?Router?導(dǎo)航守衛(wèi)可以簡(jiǎn)化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進(jìn)行權(quán)限控制,但需要學(xué)習(xí)和理解相關(guān)概念,并且需要手動(dòng)編寫(xiě)和管理導(dǎo)航守衛(wèi)的邏輯,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07詳解如何在Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了如何在你的Vue項(xiàng)目中實(shí)現(xiàn)累加動(dòng)畫(huà),文中的示例代碼簡(jiǎn)潔易懂,具有一定的參考價(jià)值,感興趣的小伙伴可以了解一下2023-06-06el-select單選時(shí)選擇后輸入框的is-focus狀態(tài)并沒(méi)有取消問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于el-select單選時(shí)選擇后輸入框的is-focus狀態(tài)并沒(méi)有取消問(wèn)題的解決過(guò)程,文中通過(guò)圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01Vue中的基礎(chǔ)過(guò)渡動(dòng)畫(huà)及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過(guò)渡動(dòng)畫(huà)原理解析,需要的朋友可以參考下2018-12-12Vue WatchEffect函數(shù)創(chuàng)建高級(jí)偵聽(tīng)器
watchEffect傳入的函數(shù)會(huì)被立即執(zhí)行一次,并且在執(zhí)行的過(guò)程中會(huì)收集依賴;其次,只有收集的依賴發(fā)生變化時(shí),watchEffect傳入的函數(shù)才會(huì)再次執(zhí)行2023-03-03