Tips：本篇已加入系列文章閱讀目錄，可點選檢視更多相關文章。 [TOC] # 前言 上一篇介紹了vue+ABP國際化的基本實現，本篇開始功能模組的開發，首先完成ABP模板自帶的身份認證管理模組和租戶管理模組。同樣的，參考ABP的Angular版本來做。 # 開始 功能模組的開發往往是最容易的，但是要處理好每個細節就不容易了。就拿這裡的身份認證管理模組來說，看似很簡單，因為後端介面都是ABP模板裡現成的，前端部分無非就是寫介面，調介面，綁資料；但是看一下ABP Angular版本的程式碼，就會發現他其實是有很多細節方面的處理的。 回到vue，因為前端部分的程式碼檔案太多，下面只列出一些需要注意的細節，其他的像vue元件、表格、表單、資料繫結、介面請求之類的其實都差不多就不說了。 ## 按鈕級許可權 前面章節中實現了選單許可權的控制，按鈕許可權的道理也是一樣的。判斷abpConfig.auth.grantedPolicies是否包含某個許可權，然後在元件中使用`v-if`渲染就好了。 src\utils\abp.js： ```js export function checkPermission(policy) { const abpConfig = store.getters.abpConfig; if (abpConfig.auth.grantedPolicies[policy]) { return true; } else { return false; } } ``` src\views\identity\roles.vue： ```vue {{ $t("AbpIdentity['NewRole']") }} ```   ## 身份認證管理 角色和使用者的增刪改查就不說了，這裡要注意一下許可權管理。使用者和角色都需要用到許可權管理，在ABP Angular版中是一個獨立的permission-management模組。我這裡也把他作為一個公用元件，根據providerName來區分，"R"是角色許可權，"U"是使用者許可權。 ### R/U許可權 他們有一點區別，使用者許可權可能來自於角色許可權，所以使用者中的許可權需要顯示是來自哪個providerName和providerKey，如果來自其他provider則disabled，不可以修改。 src\views\identity\components\permission-management.vue： ```vue

``` ```js transformPermissionTree(permissions, name = null) { let arr = []; if (!permissions || !permissions.some(v => v.parentName == name)) return arr; const parents = permissions.filter(v => v.parentName == name); for (let i in parents) { let label = ''; if (this.permissionsQuery.providerName == "R") { label = parents[i].displayName; } else if (this.permissionsQuery.providerName == "U") { label = parents[i].displayName + " " + parents[i].grantedProviders.map(provider => { return `${provider.providerName}: ${provider.providerKey}`; }); } arr.push({ name: parents[i].name, label, disabled: this.isGrantedByOtherProviderName( parents[i].grantedProviders ), children: this.transformPermissionTree(permissions, parents[i].name) }); } return arr; }, isGrantedByOtherProviderName(grantedProviders) { if (grantedProviders.length) { return ( grantedProviders.findIndex( p => p.providerName !== this.permissionsQuery.providerName ) > -1 ); } return false; } ```   ### 許可權重新整理 還有一個細節問題，如果正在修改的許可權影響到了當前使用者，如何立即生效。 src\views\identity\components\permission-management.vue： ```js updatePermissions(this.permissionsQuery, { permissions: tempData }).then( () => { this.dialogPermissionFormVisible = false; this.$notify({ title: this.$i18n.t("HelloAbp['Success']"), message: this.$i18n.t("HelloAbp['SuccessMessage']"), type: "success", duration: 2000 }); fetchAppConfig( this.permissionsQuery.providerKey, this.permissionsQuery.providerName ); } ); ``` src\utils\abp.js： ```js function shouldFetchAppConfig(providerKey, providerName) { const currentUser = store.getters.abpConfig.currentUser; if (providerName === "R") return currentUser.roles.some(role => role === providerKey); if (providerName === "U") return currentUser.id === providerKey; return false; } export function fetchAppConfig(providerKey, providerName) { if (shouldFetchAppConfig(providerKey, providerName)) { store.dispatch("app/applicationConfiguration").then(abpConfig => { resetRouter(); store.dispatch("user/setRoles", abpConfig.currentUser.roles); const grantedPolicies = abpConfig.auth.grantedPolicies; // generate accessible routes map based on grantedPolicies store .dispatch("permission/generateRoutes", grantedPolicies) .then(accessRoutes => { // dynamically add accessible routes router.addRoutes(accessRoutes); }); // reset visited views and cached views //store.dispatch("tagsView/delAllViews", null, { root: true }); }); } } ```  ---- 還有很多需要注意的，比如`isStatic===true`的角色不可以刪除，並且不可以修改名稱；新增使用者和編輯使用者的密碼校驗規則需要區別對待；儲存許可權是差異儲存。等等。。。有條件的可以看一下ABP的Angular程式碼。 ## 租戶管理 基本功能介面都差不多。。。但是這裡有一個”管理功能“的選項，預設是顯示”沒有可用的功能“：  這玩意在介面上沒地方新增，也沒地方刪除，但是這個功能相當實用。它來自ABP的FeatureManagement模組，也稱為”特徵管理“，這個後面再做介紹。 ### 租戶切換 完成了租戶管理，那麼登入時也應該可以切換租戶。  切換租戶比較簡單，就是根據輸入的租戶名稱獲取到租戶ID，然後呼叫`/abp/application-configuration`介面，把租戶ID放到請求Header的**__tenant**欄位中即可，之後的請求中也需要這個引數，不傳的話就是預設的宿主端。  其實ABP後端是可以配置是否啟用多租戶的，這裡也可以根據後端配置來顯示或者隱藏租戶切換的按鈕。跟ABP模板相比，登入介面還缺少一個註冊入口，後面再加上吧。 ## 效果      # 最後 前端部分的模組開發就不再詳細介紹了，主題還是ABP。進行到這裡，ABP模板自帶的前端部分功能就差不多完成了，需要程式碼的可以去 https://github.com/xiajingren/HelloAbp 拉取，後面我再把檔案整理一下，弄一個乾淨的vue版本。