循序漸進VUE+Element 前端應用開發(18)--- 功能點管理及許可權控制

来源:https://www.cnblogs.com/wuhuacong/archive/2020/07/15/13305509.html
-Advertisement-
Play Games

在一個業務管理系統中,如果我們需要實現許可權控制功能,我們需要定義好對應的許可權功能點,然後在界面中對界面元素的功能點進行綁定,這樣就可以在後臺動態分配許可權進行動態控制了,一般來說,許可權功能點是針對角色進行控制的,也就是簡稱RBAC(Role Based Access Control)。在前面隨筆中,我... ...


在一個業務管理系統中,如果我們需要實現許可權控制功能,我們需要定義好對應的許可權功能點,然後在界面中對界面元素的功能點進行綁定,這樣就可以在後臺動態分配許可權進行動態控制了,一般來說,許可權功能點是針對角色進行控制的,也就是簡稱RBAC(Role Based Access Control)。在前面隨筆中,我們介紹了菜單資源,在許可權管理系統中,菜單也是屬於許可權控制的一個資源,其也是作用於角色層面上的。本篇隨筆介紹功能點管理及許可權控制,功能點是作為一個業務對象數據進行管理,在角色範疇上進行分配,而在界面元素控制上,VUE+Element 前端引入Vue自定義指令Directives進行控制。

1、  許可權功能點管理

我們在前面分析過一個許可權系統的表和關係的說明,如下所示。

許可權功能點的管理就是對TB_Function的表的管理操作,這個表是我們定義用於系統控制的功能點。

許可權功能點的管理為了展示它的樹狀結果,包括樹列表的管理和明細列表的管理,如下圖所示。

功能點的查看界面如下所示,除了展示對應功能點的詳細信息外,還列出這個功能點被那些角色擁有使用。

 功能點的新增界面如下所示,主要就是選擇父節點和錄入功能點的信息即可。

而為了更加方便批量錄入許可權功能點,我們可以以業務表為基礎進行批量錄入,如下所示。

這樣添加客戶信息的功能點名稱,會自動變為:Customer/Add,其他的類似,這樣可以快速添加針對這個業務表的相關功能點。

有了這些功能點的定義,我們就可以結合角色管理進行分配給不同的角色了。如下是在角色編輯界面中,為角色分配不同的許可權控制點。

 

2、VUE+Element 前端許可權控制

前面內容介紹了許可權功能點的管理,以及基於角色的許可權實現分配處理,這些都為前端實現界面元素的許可權控製做準備的。

首先我們需要根據ABP後端的介面進行前端JS端的類的封裝處理,其中前面說過,常規的Get/GetAll/Create/Update/Delete/Count等介面,我們放在BaseApi基類裡面定義,其他子類繼承它即可。

許可權模塊我們涉及到的用戶管理、機構管理、角色管理、菜單管理、功能管理、審計日誌、登錄日誌等業務類,那麼這些類繼承BaseApi,就會具有相關的介面了,如下所示繼承關係。

由於用戶相關的菜單、許可權集合是在用戶範疇裡面,我們可以在UserApi裡面定義對應的後端介面調用。

 其中 GetGrantedFunctionsByUser 方法就是獲取指定用戶的許可權功能點集合的函數。

UserApi的類文件user.js內容如下所示。

 

 其中 GetGrantedFunctionsByUser 方法就是獲取指定用戶的許可權功能點集合的函數,函數代碼如下所示。

  GetGrantedFunctionsByUser(id) { // 獲取用戶許可權列表
    return request({
      url: this.baseurl + 'GetGrantedFunctionsByUser',
      method: 'get',
      params: { id }
    })
  }

 

在用戶的Store/Modules/user.js裡面,我們增加一個功能點的狀態信息,如下所示。

然後在用戶每次獲取信息的時候,把它的功能點信息也存儲起來,那麼界面就可以根據這個存儲內容進行相應的許可權控制了。

在Mutation裡面添加一個設置用戶狀態信息的函數,如下所示。

  SET_PERMITS: (state, permits) => {
    state.permits = permits
  }

這樣我們在用戶信息獲取的getInfo函數裡面,就可以順便一起獲取用戶的包含的許可權功能點信息集合了。

  // 獲取用戶信息
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      user.getInfo(state.userid).then(response => {
        const { result } = response
       
        ....................

        commit('SET_ROLES', { roles, roleNames })
        commit('SET_NAME', name)
        commit('SET_INTRODUCTION', fullName)

        // 獲取用戶許可權
        user.GetGrantedFunctionsByUser(state.userid).then(data => {
          var list = data.result.items
          if (list) {
            var permits = []
            list.forEach(element => {
              if (element && element.name && typeof (element.name) !== 'undefined') {
                permits.push(element.name.toLowerCase()) // 小寫
              }
            });
            // 設置用戶功能許可權點
            commit('SET_PERMITS', permits)
          }
        })

        resolve(result)
      }).catch(error => {
        reject(error)
      })
    })
  },

現在前端也有這些許可權功能點控制集合了,這些就是對應當前登錄用戶的可訪問許可權集合了。

接下來的就是需要根據這些許可權集合,進行界面元素的控制了,如對一些操作按鈕,如新增、編輯、刪除、導入、導出等操作的按鈕是否可以顯示進行管理。

這個操作就是設計到Vue的自定義指令操作了,如不瞭解的自定義Directives的使用的,可以參考下官方介紹:https://cn.vuejs.org/v2/guide/custom-directive.html 

如我們定義一個v-permit 的自定義指令來處理許可權功能點的綁定處理,那麼界面應該如下處理。

    <el-row style="float:right;padding-bottom:10px">
      <el-button icon="el-icon-search" type="primary" size="mini" round @click="search()">查詢</el-button>
      <el-button icon="el-icon-refresh-left" type="warning" size="mini" round plain @click="resetSeachForm('searchForm')">重置</el-button>
      <el-button v-permit="['User/add']" icon="el-icon-plus" type="success" size="mini" round @click="showAdd()">添加</el-button>
      <el-button v-permit="['User/import']" icon="el-icon-upload2" type="warning" size="mini" round @click="showImport()">導入</el-button>
      <el-button v-permit="['User/export']" icon="el-icon-download" type="warning" size="mini" round @click="showImport()">導出</el-button>
    </el-row>

通過類似 v-permit="['User/add']" 的方式操作,就可以指定這個操作按鈕的功能點,如果用戶具有這些功能點,那麼就可以使用,否則就不顯示了。

我們在directive目錄中定義一個permit.js的自定義指令文件,用來進行相應的處理的。

 

然後在index.js的發佈文件裡面定義裝載處理邏輯,如下代碼所示

import permit from './permit'

const install = function(Vue) {
  Vue.directive('permit', permit)
}

if (window.Vue) {
  window['permit'] = permit
  // eslint-disable-next-line no-undef
  Vue.use(install)
}

permission.install = install
export default permission

最後,在main.js裡面全局裝載自定義指令的操作,如下代碼所示。

// 全局引入並使用許可權控制點的自定義指令
import permission from './directive/permission'
Vue.use(permission)

有了store模塊裡面的狀態信息,以及自定義指令的支持,在界面上對應按鈕元素上,就可以利用這些許可權點進行控制操作了。

 

為了方便讀者理解,我列出一下前面幾篇隨筆的連接,供參考:

循序漸進VUE+Element 前端應用開發(1)--- 開發環境的準備工作

循序漸進VUE+Element 前端應用開發(2)--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3)--- 動態菜單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4)--- 獲取後端數據及產品信息頁面的處理

循序漸進VUE+Element 前端應用開發(5)--- 表格列表頁面的查詢,列表展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6)--- 常規Element 界面組件的使用

循序漸進VUE+Element 前端應用開發(7)--- 介紹一些常規的JS處理函數

循序漸進VUE+Element 前端應用開發(8)--- 樹列表組件的使用

循序漸進VUE+Element 前端應用開發(9)--- 界面語言國際化的處理

循序漸進VUE+Element 前端應用開發(11)--- 圖標的維護和使用

循序漸進VUE+Element 前端應用開發(12)--- 整合ABP框架的前端登錄處理

循序漸進VUE+Element 前端應用開發(13)--- 前端API介面的封裝處理

循序漸進VUE+Element 前端應用開發(14)--- 根據ABP後端介面實現前端界面展示

循序漸進VUE+Element 前端應用開發(15)--- 用戶管理模塊的處理

循序漸進VUE+Element 前端應用開發(16)--- 組織機構和角色管理模塊的處理 

循序漸進VUE+Element 前端應用開發(17)--- 菜單管理

循序漸進VUE+Element 前端應用開發(18)--- 功能點管理及許可權控制  

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 #常見約束 2 3 /* 4 5 6 含義:一種限制,用於限製表中的數據,為了保證表中的數據的準確和可靠性 7 8 9 分類:六大約束 10 NOT NULL:非空,用於保證該欄位的值不能為空 11 比如姓名、學號等 12 DEFAULT:預設,用於保證該欄位有預設值 13 比如性別 14 PR ...
  • 本文更新於2020-04-05,使用MySQL 5.7,操作系統為Deepin 15.4。 安裝 MySQL Utilities需單獨安裝,如使用apt-get命令: apt-get install mysql-utilities 分類 MySQL工具根據用途可以分為如下幾類: 審計日誌管理:mys ...
  • 參考博客:https://blog.csdn.net/harvic880925/article/details/40660137 EventBus簡介 EventBus有哪些優點 Demo案例分享及問題解決 一、什麼是EventBus 由greenboot組織貢獻(該組織還貢獻了greenDAO), ...
  • 教程 必讀 | 深入理解佈局約束 插件 elastic-widgets Set of Flutter widgets built using physics based animations. timeago.dart A library useful for creating fuzzy time ...
  • JS寄快遞地址智能解析——2020年7月15日 去年做了些前端內容,最近在整理一些稍微有點用的內容,比如智能解析地址,用戶只要輸入:張三1351111111江蘇省揚州市廣陵區XX小區X樓xxx室,就能解析出 姓名、電話、省市區、地址信息了。是不是很方便? 項目地址暫時沒有放,大家可以關註我的個人碼雲 ...
  • 網頁中常常會有一個 返回頂部的功能,恰巧我這天寫到了,在網上找了一下思路,下麵就寫了一個案例: 效果預覽:https://li_shang_shan.gitee.io/small_rocket_back_to_top。 代碼就直接粘貼了: <html> <head> <meta charset="u ...
  • 詳解JS中定時器setInterval和setTImeout的this指向問題 ...
  • 圖片上傳思路:通過ajax實現圖片上傳,然後把PHP返回的圖片地址,加入到隱藏欄位中,最後通過表單提交給後臺PHP,代碼如下 HTML代碼 zimg.html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...