20180308_vue-router前端權(quán)限控制問題

阿羅發(fā)布于2019-08-22 15:13 / 3430人閱讀

vue-router前端權(quán)限控制問題
前提綱要：
1.用戶A和用戶B有不同的權(quán)限。
頁面分左側(cè)菜單部分和右側(cè)內(nèi)容部分，右側(cè)內(nèi)容可能有不同路徑的不同內(nèi)容
最簡單例子為點擊左側(cè)用戶管理
右側(cè)顯示用戶列表
點擊某條內(nèi)容詳情
右側(cè)顯示某一用戶的詳細內(nèi)容
2.用戶A可以訪問路徑權(quán)限如下：

a/list
a/detail/:id
a/list/:id

用戶B可以訪問路徑權(quán)限如下：

b/list
b/detail/:id
b/list/:id

3.正常用戶登陸進去可以看到自己的菜單，
點擊菜單右側(cè)內(nèi)容部分發(fā)生變化，然后在右側(cè)操作,更改頁面url，左側(cè)菜單不變，右側(cè)內(nèi)容頁發(fā)生變化

碰到問題如下：
用戶B登陸進去點擊菜單進入b/detail/:id然后保存為書簽（即保存該路徑）退出
然后用戶A登陸點擊保存的標簽頁，正常獲取左側(cè)菜單權(quán)限，左側(cè)菜單正常顯示，但是右側(cè)卻根據(jù)url顯示了自己權(quán)限外的b/detail/:id的內(nèi)容(暫不考慮跟服務(wù)端交互問題，雖說服務(wù)端可以再掉用接口時給出無權(quán)限返回，前端再根據(jù)返回進行邏輯處理，但即便這樣前端頁面顯示依舊不正常)

解決方案：
在路由進入之前，根據(jù)路由的meta屬性的某一字段比對所有的可訪問權(quán)限(這個在登錄時已經(jīng)獲取了，可以存在localstorage里)，如果能找到則進去否則跳轉(zhuǎn)到某個固定頁，這樣就解決了權(quán)限問題

GPU云服務(wù)器云服務(wù)器權(quán)限控制角色權(quán)限控制 php控制權(quán)限 rbac權(quán)限控制

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93272.html

相關(guān)文章

vue權(quán)限管理系統(tǒng)

摘要：權(quán)限系統(tǒng)后臺管理系統(tǒng)一般都會有權(quán)限模塊，用來控制用戶能訪問哪些頁面和哪些數(shù)據(jù)接口。大多數(shù)管理系統(tǒng)的頁面都長這樣。表為角色權(quán)限關(guān)聯(lián)表，一個角色擁有哪些權(quán)限是通過這張表查出來的。這樣就是一個賬號角色權(quán)限的關(guān)系。 vue權(quán)限系統(tǒng) 后臺管理系統(tǒng)一般都會有權(quán)限模塊，用來控制用戶能訪問哪些頁面和哪些數(shù)據(jù)接口。大多數(shù)管理系統(tǒng)的頁面都長這樣。 showImg(https://segmentfault...

bovenson 2019-08-23 14:46 評論0 收藏0
手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇)

摘要：我們將登錄按鈕上綁上事件，點擊登錄之后向服務(wù)端提交賬號和密碼進行驗證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個涉及到權(quán)限的地方就是側(cè)邊欄，不過在前完整項目地址：vue-element-admin 系列文章：手摸手，帶你用vue擼后臺系列一（基礎(chǔ)篇）手摸手，帶你用vue擼后臺系列二(登錄權(quán)限篇) 手摸手，帶你用vue擼后臺系列三 (實戰(zhàn)篇) 手摸手，帶你用vu...

不知名網(wǎng)友 2019-08-20 16:45 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0
前端真的能做到徹底權(quán)限控制嗎？

摘要：有一天突然想到一個問題，端的權(quán)限控制真的能控制權(quán)限嗎僅僅靠前端，能不能做到真正的權(quán)限控制如果需要后臺配合，應(yīng)該如何配合可能這是一個老生常談的問題，但還是想整理下，有誤的地方望大家指出。有一天突然想到一個問題，web端的權(quán)限控制：1.真的能控制權(quán)限嗎？2.僅僅靠前端，能不能做到真正的權(quán)限控制？3.如果需要后臺配合，應(yīng)該如何配合？可能這是一個老生常談的問題，但還是想整理下，有誤的地方望大...

luck 2019-08-21 18:35 評論0 收藏0