- 前段時間做了一個管理系統(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是一起的衅澈，不能刪除
