20180308_vue-router前端權限控制問題

阿羅發布于2019-08-22 15:13 / 3386人閱讀

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.正常用戶登陸進去可以看到自己的菜單，
點擊菜單右側內容部分發生變化，然后在右側操作,更改頁面url，左側菜單不變，右側內容頁發生變化

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

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

GPU云服務器云服務器權限控制角色權限控制 php控制權限 rbac權限控制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93272.html

vue權限管理系統

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

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

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

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

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

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

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

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

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

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