- 前段時間做了一個管理系統(tǒng)的頁面燕差,要求最高權(quán)限的賬號遭笋,可以新打開下級權(quán)限的頁面。
如圖1徒探,管理員打開自己頁面的權(quán)限瓦呼,也可以打開下級權(quán)限用戶的頁面,如圖2测暗。圖1和圖1同一個用戶2種權(quán)限央串,可以在一個瀏覽器里打開。
圖1.png
圖2.png
要求:
- 原來的頁面權(quán)限為管理員的權(quán)限頁面和請求內(nèi)容碗啄。
- 新打開的頁面為下級權(quán)限的頁面和請求內(nèi)容(包括跳轉(zhuǎn)到指定的頁面)质和。
解決方法:這就相當(dāng)于有2個用戶權(quán)限的頁面了,但是考慮到一個瀏覽器只能登錄一個用戶稚字,目前只能想到利用路徑參數(shù)來解決饲宿,這個步驟一共4步。
分別為:
步驟一:傳參數(shù)
步驟二:存參數(shù)
步驟三:后臺請求中用參數(shù)
步驟四:跳轉(zhuǎn)的頁面用參數(shù)
-
步驟一:
傳參數(shù)胆描。
如下圖3所示瘫想,跳轉(zhuǎn)時新打開一個頁面,帶路徑參數(shù)uid(用戶id)和dataUrl(新打開的目標頁面)
圖3.png
代碼為:
goToHomePage(row) {
//TODO 這里的uid可能為后臺數(shù)據(jù)給的userId
//上線的測試
let uid = row.user_id
let dataUrl = 'modules/t-lodge/index.html/#/room-device'
// let url = `${window.parent.location.href.split('?')[0]}?uid=${uid}&dataUrl=${dataUrl}`
let url = `${location.href.split('?')[0]}?uid=${uid}&dataUrl=/room-device/#/room-device`
window.open(url)
// 本地測試
// let locationUrlPre = location.href.split('#')[0]
// window.open(`${locationUrlPre}?uid=${uid}#/room-device`)
},
-
步驟二:
存參數(shù)昌讲。
如圖4殿托,根據(jù)路徑參數(shù)把uid和daraUrl存儲在store里面【store比http先加載】
圖4.png
代碼為:
let myUid = ''
let dataUrl = ''
if (location.search) {
function handleUrl(str) {
let obj = {}
let arr = str.split('&')
arr.map((item) => {
let itemArr = item.split('=')
obj[itemArr[0]] = itemArr[1]
})
return obj
}
// let searchObj = new URLSearchParams(location.search.substring(1, location.search.length - 1))
// myUid = searchObj.get('uid') || ''
// dataUrl = searchObj.get('dataUrl') || ''
//兼容IE(URLSearchParams不兼容IE)
let searchObj = handleUrl(location.search.substring(1, location.search.length - 1))
myUid = searchObj.uid || ''
dataUrl = searchObj.dataUrl || ''
}
//store里的參數(shù)
state: {
uid: myUid,
dataUrl: dataUrl,
screenWidth: document.documentElement.clientWidth, //屏幕寬度
}
-
步驟三:
后臺請求中用參數(shù)。
如圖5剧蚣,如果store里面存在uid,則設(shè)置headers里面設(shè)置添加user_id旋廷,沒有uid則不設(shè)置(這里的headers是axios請求共用的鸠按,設(shè)置一次就行),登錄后每個請求都帶有cookie饶碘,如圖6目尖,后臺根據(jù)user_id判斷用戶的請求,如果有user_id則請求user_id用戶的數(shù)據(jù)扎运,沒有user_id則請求登錄cookie用戶的數(shù)據(jù)瑟曲。
圖5.png
代碼為:
axios.interceptors.request.use(config => {
if (store.state.uid) {
config.headers.user_id = store.state.uid
}
return config
}, err => {
return Promise.reject(err)
})
圖6.png
-
步驟四:
跳轉(zhuǎn)的頁面用參數(shù)饮戳。
如圖7所示,請求完菜單列表后洞拨,根據(jù)store里的dataUrl是否存在扯罐,判斷是否進入目標頁面dataUrl。
圖7.png
代碼為:
this.$api.getMenuInfo()
.then(res => {
if (res.data.code === 0) {
//登錄成功 跳轉(zhuǎn)頁面 //TODO
this.handleMenuList(res.data.menuList)
let uid = this.$store.state.uid
if (uid) { //主頁跳轉(zhuǎn)進來的烦衣,有uid同時必須有dataUrl
this.goToThisPage(this.$store.state.dataUrl)
} //直接登錄進來的
else {
this.goToThisPage('/')
}
}
else {
this.$message.error(res.data.msg)
}
})
上面代碼中的getMenuInfo為請求歹河,handleMenuList,goToThisPage為自己定義的跳轉(zhuǎn)頁面的方法花吟。
問題:跳轉(zhuǎn)的頁面秸歧,每次刷新都會跳轉(zhuǎn)到路徑參數(shù)指定的頁面,因為指定頁面和用戶id是一起的衅澈,不能刪除