vue基於d2-admin的RBAC許可權管理解決方案

若邪發表於2019-01-06

Vue

前兩篇關於vue許可權路由文章的填坑，說了一堆理論，是時候操作一波了。

vue許可權路由實現方式總結

vue許可權路由實現方式總結二

選擇d2-admin是因為element-ui的相關開源專案裡，d2-admin的結構和程式碼是讓我感到最舒服的,而且基於d2-admin實現RBAC許可權管理也很方便，對d2-admin沒有大的侵入性的改動。

預覽地址

Github

執行流程及相關API

使用d2admin的原有登入邏輯，全域性路由守衛中判斷是否已經拉取許可權資訊，獲取後標識為已獲取。

const token = util.cookies.get('token')
    if (token && token !== 'undefined') {
      //拉取許可權資訊
      if (!isFetchPermissionInfo) {
        await fetchPermissionInfo();
        isFetchPermissionInfo = true;
        next(to.path, true)
      } else {
        next()
      }
    } else {
      // 將當前預計開啟的頁面完整地址臨時儲存 登入後繼續跳轉
      // 這個 cookie(redirect) 會在登入後自動刪除
      util.cookies.set('redirect', to.fullPath)
      // 沒有登入的時候跳轉到登入介面
      next({
        name: 'login'
      })
    }
複製程式碼

//標記是否已經拉取許可權資訊
let isFetchPermissionInfo = false

let fetchPermissionInfo = async () => {
  //處理動態新增的路由
  const formatRoutes = function (routes) {
    routes.forEach(route => {
      route.component = routerMapComponents[route.component]
      if (route.children) {
        formatRoutes(route.children)
      }
    })
  }
  try {
    let userPermissionInfo = await userService.getUserPermissionInfo()
    permissionMenu = userPermissionInfo.accessMenus
    permissionRouter = userPermissionInfo.accessRoutes
    permission.functions = userPermissionInfo.userPermissions
    permission.roles = userPermissionInfo.userRoles
    permission.interfaces = util.formatInterfaces(userPermissionInfo.accessInterfaces)
    permission.isAdmin = userPermissionInfo.isAdmin == 1
  } catch (ex) {
    console.log(ex)
  }
  formatRoutes(permissionRouter)
  let allMenuAside = [...menuAside, ...permissionMenu]
  let allMenuHeader = [...menuHeader, ...permissionMenu]
  //動態新增路由
  router.addRoutes(permissionRouter);
  // 處理路由 得到每一級的路由設定
  store.commit('d2admin/page/init', [...frameInRoutes, ...permissionRouter])
  // 設定頂欄選單
  store.commit('d2admin/menu/headerSet', allMenuHeader)
  // 設定側邊欄選單
  store.commit('d2admin/menu/fullAsideSet', allMenuAside)
  // 初始化選單搜尋功能
  store.commit('d2admin/search/init', allMenuHeader)
  // 設定許可權資訊
  store.commit('d2admin/permission/set', permission)
  // 載入上次退出時的多頁列表
  store.dispatch('d2admin/page/openedLoad')
  await Promise.resolve()
}
複製程式碼

後端需要返回的許可權資訊包括許可權過濾後的角色編碼集合，功能編碼集合，介面資訊集合，選單列表，路由列表，以及是否系統管理員標識。格式如下

{
  "statusCode": 200,
  "msg": "",
  "data": {
    "userName": "MenuManager",
    "userRoles": [
      "R_MENUADMIN"
    ],
    "userPermissions": [
      "p_menu_view",
      "p_menu_edit",
      "p_menu_menu"
    ],
    "accessMenus": [
      {
        "title": "系統",
        "path": "/system",
        "icon": "cogs",
        "children": [
          {
            "title": "系統設定",
            "icon": "cogs",
            "children": [
              {
                "title": "選單管理",
                "path": "/system/menu",
                "icon": "th-list"
              }
            ]
          },
          {
            "title": "組織架構",
            "icon": "pie-chart",
            "children": [
              {
                "title": "部門管理",
                "icon": "html5"
              },
              {
                "title": "職位管理",
                "icon": "opencart"
              }
            ]
          }
        ]
      }
    ],
    "accessRoutes": [
      {
        "name": "System",
        "path": "/system",
        "component": "layoutHeaderAside",
        "componentPath": "layout/header-aside/layout",
        "meta": {
          "title": "系統設定",
          "cache": true
        },
        "children": [
          {
            "name": "MenuPage",
            "path": "/system/menu",
            "component": "menu",
            "componentPath": "pages/sys/menu/index",
            "meta": {
              "title": "選單管理",
              "cache": true
            }
          },
          {
            "name": "RoutePage",
            "path": "/system/route",
            "component": "route",
            "componentPath": "pages/sys/route/index",
            "meta": {
              "title": "路由管理",
              "cache": true
            }
          },
          {
            "name": "RolePage",
            "path": "/system/role",
            "component": "role",
            "componentPath": "pages/sys/role/index",
            "meta": {
              "title": "角色管理",
              "cache": true
            }
          },
          {
            "name": "UserPage",
            "path": "/system/user",
            "component": "user",
            "componentPath": "pages/sys/user/index",
            "meta": {
              "title": "使用者管理",
              "cache": true
            }
          },
          {
            "name": "InterfacePage",
            "path": "/system/interface",
            "component": "interface",
            "meta": {
              "title": "介面管理"
            }
          }
        ]
      }
    ],
    "accessInterfaces": [
      {
        "path": "/menu/:id",
        "method": "get"
      },
      {
        "path": "/menu",
        "method": "get"
      },
      {
        "path": "/menu/save",
        "method": "post"
      },
      {
        "path": "/interface/paged",
        "method": "get"
      }
    ],
    "isAdmin": 0,
    "avatarUrl": "https://api.adorable.io/avatars/85/abott@adorable.png"
  }
}
複製程式碼

設定選單

將固定選單(/menu/header、/menu/aside)與後端返回的許可權選單(accessMenus)合併後，存入相應的vuex store模組中

...
let allMenuAside = [...menuAside, ...permissionMenu]
let allMenuHeader = [...menuHeader, ...permissionMenu]
...
// 設定頂欄選單
store.commit('d2admin/menu/headerSet', allMenuHeader)
// 設定側邊欄選單
store.commit('d2admin/menu/fullAsideSet', allMenuAside)
// 初始化選單搜尋功能
store.commit('d2admin/search/init', allMenuHeader)
複製程式碼

處理路由

預設使用routerMapComponents 的方式處理後端返回的許可權路由

//處理動態新增的路由
const formatRoutes = function (routes) {
    routes.forEach(route => {
        route.component = routerMapComponents[route.component]
        if (route.children) {
        formatRoutes(route.children)
        }
    })
}
...
formatRoutes(permissionRouter)
//動態新增路由
router.addRoutes(permissionRouter);
// 處理路由 得到每一級的路由設定
store.commit('d2admin/page/init', [...frameInRoutes, ...permissionRouter])
複製程式碼

路由處理方式及區別可看vue許可權路由實現方式總結二

設定許可權資訊

將角色編碼集合，功能編碼集合，介面資訊集合，以及是否系統管理員標識存入相應的vuex store模組中

...
permission.functions = userPermissionInfo.userPermissions
permission.roles = userPermissionInfo.userRoles
permission.interfaces = util.formatInterfaces(userPermissionInfo.accessInterfaces)
permission.isAdmin = userPermissionInfo.isAdmin == 1
...
// 設定許可權資訊
store.commit('d2admin/permission/set', permission)
複製程式碼

介面許可權控制以及loading配置

支援使用角色編碼，功能編碼以及介面許可權進行控制，如下

export function getMenuList() {
    return request({
        url: '/menu',
        method: 'get',
        interfaceCheck: true,
        permission:["p_menu_view"],
        loading: {
            type: 'loading',
            options: {
                fullscreen: true,
                lock: true,
                text: '載入中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.8)'
            }
        },
        success: {
            type: 'message',
            options: {
                message: '載入選單成功',
                type: 'success'
            }
        }
    })
}
複製程式碼

interfaceCheck: true表示使用介面許可權進行控制，如果vuex store中儲存的介面資訊與當前要請求的介面想匹配，則可發起請求，否則請求將被攔截。

permission:["p_menu_view"]表示使用角色編碼和功能編碼進行許可權校驗，如果vuex store中儲存的角色編碼或功能編碼與當前表示的編碼相匹配，則可發起請求，否則請求將被攔截。

原始碼位置在libs/permission.js，可根據自己需求進行修改

loading配置相關原始碼在libs/loading.js，根據自己需求進行配置，success也是如此，原始碼在libs/loading.js。照此思路可以自行配置其它功能，比如請求失敗等。

頁面元素許可權控制

使用指令v-permission：

 <el-button
    v-permission:function.all="['p_menu_edit']"
    type="primary"
    icon="el-icon-edit"
    size="mini"
    @click="batchEdit"
    >批量編輯</el-button>
複製程式碼

引數可為function、role，表明以功能編碼或角色編碼進行校驗，為空則使用兩者進行校驗。

修飾符all，表示必須全部匹配指令值中所有的編碼。

原始碼位置在plugin/permission/index.js，根據自己實際需求進行修改。

使用v-if+全域性方法：

<el-button
    v-if="canAdd"
    type="primary"
    icon="el-icon-circle-plus-outline"
    size="mini"
    @click="add"
    >新增</el-button>
複製程式碼

data() {
    return {
      canAdd: this.hasPermissions(["p_menu_edit"])
    };
  },
複製程式碼

預設同時使用角色編碼與功能編碼進行校驗，有一項匹配即可。

類似的方法還要hasFunctions，hasRoles。

原始碼位置在plugin/permission/index.js，根據自己實際需求進行修改。

不要使用v-if="hasPermissions(['p_menu_edit'])"這種方式，會導致方法多次執行

也可以直接在元件中從vuex store讀取許可權資訊進行校驗。

開發建議

頁面級別的元件放到pages/目錄下，並且在routerMapCompnonents/index.js中以key-value的形式匯出
不需要許可權控制的固定選單放到menu/aside.js和menu/header.js中
不需要許可權控制的路由放到router/routes.js frameIn內
需要許可權控制的選單與路由通過介面的管理功能進行新增，確保選單的path與路由的path相對應，路由的name與頁面元件的name一致才能使keep-alive生效，路由的component在routerMapCompnonents/index.js中能通過key匹配到。
開發階段選單與路由的新增可由開發人員自行維護，並維護一份清單，上線後將清單交給相關的人去維護即可。

如果覺得麻煩，不想選單與路由由後端返回，可以在前端維護一份選單和路由(路由中的component還是使用字串，參考mock/permissionMenuAndRouter.js)，並且在選單和路由上面維護相應的許可權編碼，一般都是使用功能編碼。後端就不需要返回選單和路由資訊了，但是其他許可權資訊，比如角色編碼，功能編碼等還是需要的。通過後端返回的功能編碼列表，在前端過濾出使用者具備許可權的選單和路由，過濾處理後後的選單與路由格式與之前由後端返回的格式一致，然後將處理後的選單與路由當做後端返回的一樣處理即可。

資料mock與程式碼生成

資料mock使用lazy-mock修改而來的d2-admin-server，資料真實來源於後端，相比其他工具，支援資料持久化，儲存使用的是json檔案，不需要安裝資料庫。簡單的配置即可自動生成增刪改查的介面。

後端使用中介軟體控制訪問許可權，比如：

 .get('/menu', PermissionCheck(), controllers.menu.getMenuList)
複製程式碼

PermissionCheck預設使用介面進行校驗，校驗使用者所能訪問的API中是否匹配當前API，支援使用功能編碼與角色編碼進行校驗PermissionCheck(["p_menu_edit"],["r_menu_admin"],true),第一個引數為功能編碼，第二個為角色編碼，第三個為是否使用介面進行校驗。

更多詳細用法可看lazy-mock文件

前端程式碼生成還在開發中...

React基於RBAC的許可權控制
2024-05-14
React
基於RBAC的許可權管理系統
2020-10-25
基於RBAC的許可權設計模型
2018-04-19
模型
基於casbin的RBAC許可權實踐
2022-05-03
基於RBAC實現許可權管理
2020-11-21
基於RBAC做資料許可權
2024-11-12
PHP 中基於 Casbin 做 RBAC + RESTful 許可權控制
2019-09-06
PHPREST
RBAC許可權管理
2022-12-28
基於RBAC的許可權控制淺析（結合Spring Security）
2020-05-31
Spring
vue許可權問題解決方案
2019-05-07
Vue
基於vue(element ui) + ssm + shiro 的許可權
2021-09-09
VueUISSM
RBAC許可權---SpringBoot整合Security
2020-12-13
Spring Boot
基於 Laravel5.5 和 layui 包含基礎 RBAC 許可權的管理後臺
2019-06-10
LaravelUI
基於vue(element ui) + ssm + shiro 的許可權框架
2018-08-15
VueUISSM框架
RBAC_許可權模型介紹
2018-07-09
模型
許可權管控
2024-04-20
Spring Security實現基於RBAC的許可權表示式動態訪問控制
2022-04-19
Spring
Vue 前端應用實現RBAC許可權控制的一種方式
2018-12-19
Vue前端
django自帶的許可權介紹(rbac)
2024-04-19
Django
k8s許可權管理（RBAC）
2024-05-25
K8S
從0實現RBAC許可權模型
2022-07-06
模型
基於golang的rbac許可權api管理服務（含自動生成CURD程式碼）
2021-01-08
GolangAPI
基於vue的簡單許可權管理實現總結
2020-03-09
Vue
casbin基於golang的許可權控制
2024-08-15
Golang
SpringBoot2構建基於RBAC許可權模型的駕校代理小程式後端
2019-04-06
Spring Boot模型後端
Nestjs RBAC 許可權控制管理實踐（一）
2019-04-17
JS
saas-export專案-RBAC許可權模型
2020-11-01
Export模型
Nestjs RBAC 許可權控制管理實踐（二）
2019-04-18
JS
nodejs rbac 許可權驗證（匿名，普通，admin）
2022-11-24
NodeJS
基於 Laravel6.x 構建的部落格應用，支援 Markdown,支援 RBAC 許可權管理
2019-12-03
Laravel
vue router 許可權
2018-12-17
Vue
基於 PHP 反射的許可權匯入
2018-03-24
PHP反射
如何用 Vue 實現前端許可權控制（路由許可權 + 檢視許可權 + 請求許可權）
2018-04-12
Vue前端路由
Rbac使用者角色許可權表設計
2019-02-16
前端如何配合後端完成RBAC許可權控制
2018-12-23
前端後端
使用vue-element-admin整合方案------許可權篇
2019-04-02
Vue
玩轉 K8s 許可權控制：RBAC + kubeconfig 搞定 kubectl 許可權管理那些事
2023-12-13
K8S
RBAC, ACL, ABAC 的許可權控制方式具體解釋
2024-11-29