漫談一下權限設計相關

這裏不會介紹具體實現的方式，要根據公司的業務來進行調整，下面就聊一聊基本設計的思路。

權限的設計對於一個後臺來講相當重要，不過也要根據狀況來選擇，好比咱們不會在一個博客或者我的網站的後臺中寫上權限控制，由於這是沒有必要的，可是對於面向不一樣用戶的產品來講就頗有必要了，舉個例子來講，滴滴打車的乘客和車主確定是兩個不一樣的用戶產品，如何管理裏面的數據就須要引用權限設計的功能了。

權限設計能夠幫助咱們增長信息安全、保證頁面的簡潔不至於出現誤操做的事情，下面就來講下基本的組成

組成

• 權限

  

  權限這塊能夠分爲頁面權限、功能權限和數據權限，頁面權限就是指是否能訪問當前頁面，功能權限對應的則是（增長、刪除、修改等），而數據權限則是能夠訪問的數據範圍。

• 角色

  在一個成熟的後臺設計中必然要出現角色，這是爲了不每新增一個用戶就還要從新爲他勾選一遍權限，由角色賦值給用戶權限，角色這層就至關於一箇中間層，同時也方便維護。

• 用戶

  每一個用戶對應一個帳號，在默認狀態下會給予用戶一個最小的操做權限，權限的賦值由角色給予，多個角色的權限是能夠疊加的。

延伸

上面介紹的其實就是RBAC模型的簡單概念，在實際開發中以爲至少有如下幾點須要注意：

• admin

在開發完成後須要在角色預留一個 admin 或者超級管理員，方便開發人員的維護

• 權限的優先級

上面介紹了權限的組成，可是頁面的權限應當是大於操做的權限，只有頁面的權限可見，功能的權限纔是有意義的

• tips

無權限訪問頁面、頁面不存在、服務器發生錯誤等方面的提示

最後

最後說一下前端對tips這塊的處理 40三、40四、500 的處理思路

500

500 的處理能夠經過axions的攔截器來實現，如今後端默認返回的基本格式都是

{
  // 狀態碼
  status: 200,
  data: {},
  // ...
  }
複製代碼

因此判斷服務器發生錯誤，咱們能夠直接經過

// 添加請求攔截器
axios.interceptors.request.use(
  function(config) {
    // 在發送請求以前作些什麼
    return config;
  },
  function(error) {
    // 對請求錯誤作些什麼，這一步能夠直接返回服務器發生錯誤，方便提示信息的定製
    return Promise.reject(`服務器發生錯誤`);
  }
);
複製代碼

404

404 的實現能夠經過router來實現，這裏我用的是vue router就以這個舉例，假設有一組路由爲

const router = new VueRouter({
  routes: [
    {
      path: "/user",
      component: User,
      children: [
        {
          path: "profile",
          component: UserProfile
        },
        {
          path: "posts",
          component: UserPosts
        }
      ]
    },
    {
      path: "/sign",
      component: sign
    }
  ]
});
複製代碼

那咱們就經過遞歸將全部路由拼成一維數組（注意對比的條件，這裏我對比的是 path 因此在遞歸過程當中要將父 path 相加），具體的遞歸實現取決於你的常見，這裏不作演示，以後對比訪問的路徑存不存在路由信息中，不存在則說明頁面不存在返回404

403

403 的實現須要配合後端來實現，通常狀況下會請求用戶的操做權限會返回當前用戶權限所能操做的菜單，以後將能訪問的菜單和路由信息對比，若是訪問的路徑在路由信息中可是不在用戶返回的菜單說明沒有頁面訪問的權限。

最後說下爲何沒有用*的緣由，由於不太好定製，在默認狀態下以'/'的形式訪問咱們要給予一個用戶菜單的第一項，可是若是'/'不存在路由中咱們還要寫額外的判斷，不如所有本身來自行處理了。

參考

1. 角色權限設計的 100 種解法