一對一直播系統原始碼，後臺管理系統許可權控制方案

純前端控制

前端寫死配置檔案，透過使用者角色資訊判斷是否有許可權。

例如

const anth = {
        'admin': {
            //路由許可權，如果路由許可權為false/undefined則整個頁面無許可權
            // 如果路由許可權為true，則擁有全部路由下操作的許可權
          '/home': true,
          '/base/data': true,
        },
        'developer': {
          '/home': {
                'getList': true, // 獲取列表許可權
                'search': true, // 搜尋許可權
                'submit': false, // 提交許可權
                'edit': false, // 編輯許可權
                ....
          }
        },
        'pd': {
        
        }
        ...
    }

上面簡單書寫了一下前端配置的模板。
上面這段配置表示

一對一直播系統原始碼的admin使用者，擁有/home路由、/base/data路由的訪問許可權及頁面所有操作許可權。
developer使用者，擁有/home路由，及/home頁面下獲取列表、搜尋，沒有提交、編輯許可權。
pd使用者無任何許可權。

優點

純前端控制，每次修改一對一直播系統原始碼的前端直接釋出就好了。

缺點

被抓包會直接暴露所有許可權資訊
可以透過代理的方式，強行讓使用者獲得頁面的許可權
無法針對一對一直播系統原始碼的單個使用者進行許可權配置，只能針對使用者型別配置許可權

前後端分別控制

還是上面內個檔案，只不過由後端儲存，並且返回的資訊只有當前角色的資訊
例如我現在的角色為developer那我拿到的資訊就是↓

{
      '/home': {
            'getList': true, // 獲取列表許可權
            'search': true, // 搜尋許可權
            'submit': false, // 提交許可權
            'edit': false, // 編輯許可權
      }
}

優點

一對一直播系統原始碼後端控制許可權的返回，使用者並不能拿到所有許可權點的資訊，相對安全
可以動態的給使用者新增/修改/刪除許可權資訊（之前純前端的需要前端釋出）

缺點

同樣會被代理剋制，劫持後返回所有許可權，前端同樣攔不住（因為前端拿到的是假的許可權資料）
每次新增許可權點的時候，需要一對一直播系統原始碼前後端一起釋出

許可權配置升級版

先確認一下許可權是什麼，許可權就是使用者可以進行的每一個操作，都需要校驗他能否進行操作。

對應到頁面，許可權大概分為兩個型別，一種是選單許可權(路由/頁面訪問許可權)，一種是功能點許可權。

選單許可權可以由許可權點進行繫結。

頁面訪問許可權由前端來控制，是因為目前大多數前端頁面都是SPA（單頁面應用），後端不接管頁面的訪問許可權（只有一個index）。

後端可以透過介面返回使用者擁有的選單許可權，直接返回給前端，前端覆蓋掉router的配置，讓使用者只能訪問他有許可權的頁面。
操作許可權也由另一個介面返回,資料格式如下

{
    "home_get_list": 1,
    "home_search": 1,
    "home_submit": 0,
}

前端配置的時候，提前預埋好許可權點，然後對後端返回的許可權資料進行判斷。例如：

const TestAuth = () => {
    const onClick = () => {
        //判斷提交許可權
        if(!globalAuth.home_submit){
            //沒有許可權
            message.error('沒有提交許可權');
            return;
        }
        // 提交邏輯
        ......
    }
    return <Button onClick={onClick}>提交</Button>
}

當然也可以直接判斷沒有該許可權直接不展示提交按鈕

const TestAuth = () => {
    const onClick = () => {
        // 提交邏輯
    }
    // 有home_submit許可權才渲染提交button
    return globalAuth.home_submit && <Button onClick={onClick}>提交</Button>
}

總結

純前端判斷許可權肯定是不可取的。前後端一起幹才是硬道理。

一對一直播系統原始碼前端並不能真正的阻攔使用者，就像用postman直接發請求一樣，不透過前端的方式，直接和後端互動。
所以後端每個介面一定會做許可權判斷的。

以上就是一對一直播系統原始碼，後臺管理系統許可權控制方案， 更多內容歡迎關注之後的文章