vue-router前端權限控制問題
前提綱要:
1.用戶A和用戶B有不同的權限。
頁面分左側菜單部分和右側內容部分,右側內容可能有不同路徑的不同內容
最簡單例子為點擊左側用戶管理
右側顯示用戶列表
點擊某條內容詳情
右側顯示某一用戶的詳細內容
2.用戶A可以訪問路徑權限如下:
a/list a/detail/:id a/list/:id
用戶B可以訪問路徑權限如下:
b/list b/detail/:id b/list/:id
3.正常用戶登陸進去可以看到自己的菜單,
點擊菜單右側內容部分發(fā)生變化,然后在右側操作,更改頁面url,左側菜單不變,右側內容頁發(fā)生變化
碰到問題如下:
用戶B登陸進去點擊菜單進入b/detail/:id然后保存為書簽(即保存該路徑)退出
然后用戶A登陸點擊保存的標簽頁,正常獲取左側菜單權限,左側菜單正常顯示,但是右側卻根據(jù)url顯示了自己權限外的b/detail/:id的內容(暫不考慮跟服務端交互問題,雖說服務端可以再掉用接口時給出無權限返回,前端再根據(jù)返回進行邏輯處理,但即便這樣前端頁面顯示依舊不正常)
解決方案:
在路由進入之前,根據(jù)路由的meta屬性的某一字段比對所有的可訪問權限(這個在登錄時已經獲取了,可以存在localstorage里),如果能找到則進去否則跳轉到某個固定頁,這樣就解決了權限問題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://systransis.cn/yun/93272.html
摘要:權限系統(tǒng)后臺管理系統(tǒng)一般都會有權限模塊,用來控制用戶能訪問哪些頁面和哪些數(shù)據(jù)接口。大多數(shù)管理系統(tǒng)的頁面都長這樣。表為角色權限關聯(lián)表,一個角色擁有哪些權限是通過這張表查出來的。這樣就是一個賬號角色權限的關系。 vue權限系統(tǒng) 后臺管理系統(tǒng)一般都會有權限模塊,用來控制用戶能訪問哪些頁面和哪些數(shù)據(jù)接口。大多數(shù)管理系統(tǒng)的頁面都長這樣。 showImg(https://segmentfault...
摘要:我們將登錄按鈕上綁上事件,點擊登錄之后向服務端提交賬號和密碼進行驗證。所以前端和后端權限的劃分是不太一致。側邊欄最后一個涉及到權限的地方就是側邊欄,不過在前 完整項目地址:vue-element-admin 系列文章: 手摸手,帶你用vue擼后臺 系列一(基礎篇) 手摸手,帶你用vue擼后臺 系列二(登錄權限篇) 手摸手,帶你用vue擼后臺 系列三 (實戰(zhàn)篇) 手摸手,帶你用vu...
摘要:有一天突然想到一個問題,端的權限控制真的能控制權限嗎僅僅靠前端,能不能做到真正的權限控制如果需要后臺配合,應該如何配合可能這是一個老生常談的問題,但還是想整理下,有誤的地方望大家指出。 有一天突然想到一個問題,web端的權限控制:1.真的能控制權限嗎?2.僅僅靠前端,能不能做到真正的權限控制?3.如果需要后臺配合,應該如何配合?可能這是一個老生常談的問題,但還是想整理下,有誤的地方望大...
閱讀 3182·2021-11-22 15:25
閱讀 3860·2021-11-17 09:33
閱讀 3375·2021-11-08 13:15
閱讀 3054·2021-09-22 10:56
閱讀 546·2021-08-31 09:45
閱讀 2758·2019-08-30 13:49
閱讀 3085·2019-08-30 12:52
閱讀 1149·2019-08-29 17:05