前言

在一個項目中，一些功能會涉及到重要的數(shù)據(jù)管理，為了確保數(shù)據(jù)的安全，我們會在項目中加入權(quán)限來限制每個用戶的操作。作為前端，我們要做的是配合后端給到的權(quán)限數(shù)據(jù)，做頁面上的各種各樣的限制。

需求

因為這是一個工作上的業(yè)務(wù)需求，所以對于我來說主要有兩個地方需要進(jìn)行權(quán)限控制。

第一個是側(cè)邊菜單欄，需要控制顯示與隱藏。

第二個就是頁面內(nèi)的各個按鈕，彈窗等。

流程

1、如何獲取用戶權(quán)限？

后端（當(dāng)前用戶擁有的權(quán)限列表）-> 前端（通過后端的接口獲取到，下文中我們把當(dāng)前用戶的權(quán)限列表叫做 permissionList）

2、前端如何做限制？

通過產(chǎn)品的需求，在項目中進(jìn)行權(quán)限點的配置，然后通過 permissionList 尋找是否有配置的權(quán)限點，有就顯示，沒有就不顯示。

3、然后呢？

沒了。

當(dāng)我剛開始接到這個需求的時候就是這么想的，這有什么難的，不就獲取 permissionList 然后判斷就可以了嘛。后來我才發(fā)現(xiàn)真正的需求遠(yuǎn)比我想象的復(fù)雜。

真正的問題

上面的需求有提到我們主要解決兩個問題，側(cè)邊菜單欄的顯示 & 頁面內(nèi)操作。

假設(shè)我們有這樣一個路由的設(shè)置（以下只是一個例子）：

import VueRouter from 'vue-router'/* 注意：以下配置僅為部分配置，并且省去了 component 的配置 */export const routes = [ { path: '/', name: 'Admin', label: '首頁' }, { path: '/user', name: 'User', label: '用戶', redirect: { name: 'UserList' }, children: [ { path: 'list', name: 'UserList', label: '用戶列表' }, { path: 'group', name: 'UserGroup', label: '用戶組', redirect: { name: 'UserGroupList' }, children: [ { path: 'list', name: 'UserGroupList', label: '用戶組列表' }, { path: 'config', name: 'UserGroupConfig', label: '用戶組設(shè)置' } ] } ] }, { path: '/setting', name: 'Setting', label: '系統(tǒng)設(shè)置' }, { path: '/login', name: 'Login', label: '登錄' }]const router = new VueRouter({ routes})export default router

其中前兩級路由會顯示在側(cè)邊欄中，第三級就不會顯示在側(cè)邊欄中了。

頁面內(nèi)操作的權(quán)限設(shè)置不需要考慮很多其他東西，我們主要針對側(cè)邊欄以及路由進(jìn)行問題的分析，通過分析，主要有以下幾個問題：

什么時候獲取 permissionList，如何存儲 permissionList 子路由全都沒權(quán)限時不應(yīng)該顯示本身（例：當(dāng)用戶列表和用戶組都沒有權(quán)限時，用戶也不應(yīng)該顯示在側(cè)邊欄） 默認(rèn)重定向的路由沒有權(quán)限時，應(yīng)尋找 children 中有權(quán)限的一項重定向（例：用戶路由重定向到用戶列表路由，若用戶列表沒有權(quán)限，則應(yīng)該重定向到用戶組路由） 當(dāng)用戶直接輸入沒有權(quán)限的 url 時需要跳轉(zhuǎn)到?jīng)]有權(quán)限的頁面或其他操作。（路由限制）