前端的權限分為4個模塊:
- 菜單欄 這個是需要后端傳過來的數據直接進行絢爛 把這個數據存在Vuex中,這個有個問題就是重新刷新Vuex的數據會消失,所以需要把數據保存在sessionStorage中去。
- 界面欄 從剛剛的的菜單欄有些界面是沒有,但是在瀏覽器的url中還是可以訪問的到,所以這里需要使用到動態路由,根據菜單欄下面的二級標題來添加路由屬性,在后端傳來的數據中有一個path的屬性標記的這個路徑,可以寫一個類的映射把路由動態的添加。(這個動態路由怎么寫的還是需要去看看)
- 按鈕的點擊不顯示 有些角色是不允許某些功能,例如添加的權限,前端就可以把這個點擊的按鈕不顯示出來,這個流程是需要后台剛剛的二級菜單里面應該還有一個屬性當前的用戶當前的頁面可以操作的權限,然后可以把這個權限的在動態路由中添加上去例如mate的屬性,放在了router的屬性下面,然后可以寫一個V的簡單指令,根據指令上面的屬性來判斷是否顯示。
- 從上面的顯示中,如果出現了一個人他是懂得代碼,把這個不能點擊的按鈕給開啟了,畢竟就算點擊了請求服務器,服務器還是顯示報錯,所以可以把這次的請求前端攔截住,這個主要是在axios的一個請求中,根據請求的restful風格來進行判斷,get就是顯示數據 post添加數據 put修改數據 delete刪除數據。進行判斷。
- 登錄的token 這個可以使用router的路由導航守衛來判斷。
- 還有就是當頁面停留很久導致token失效,當我們再此請求數據的時候服務器會返回一個401錯誤,我們可以使用axios的respond進行處理跳回到登錄界面上去。
- 登入的退出,需要把sessionStorage的數據清除,使用當前頁面的刷新就可以清除Vuex中的數據了。
步驟:
1. 先把username 和 password 傳給后端 =》 返回token
2. 拿token 再去請求 userInfo,userinfo 包含 菜單欄 用戶名 角色 權限表
3. 請求后端的動態路由的大表
4. 權限表下面只是一個字符串,寫一個對應表,根據字符串來生成compent
5. 然后再使用addRouter添加路由。
6. 這個側邊的菜單是從動態路由添加完成了,從路由表中取出來的。
7. 控制頁面中是否可以進行頁面上的某個操作,先是去獲取這個操作的權限角色表, 然后與當前用的角色表進行對比。
