目錄概述按鈕級權(quán)限身份認(rèn)證管理R/U權(quán)限權(quán)限刷新租戶管理租戶切換效果最后概述

功能模塊的開發(fā)往往是最容易的，但是要處理好每個(gè)細(xì)節(jié)就不容易了。就拿這里的身份認(rèn)證管理模塊來說，看似很簡單，因?yàn)楹蠖私涌诙际茿BP模板里現(xiàn)成的，前端部分無非就是寫界面，調(diào)接口，綁數(shù)據(jù)；但是看一下ABP Angular版本的代碼，就會發(fā)現(xiàn)他其實(shí)是有很多細(xì)節(jié)方面的處理的。

回到vue，因?yàn)榍岸瞬糠值拇a文件太多，下面只列出一些需要注意的細(xì)節(jié)，其他的像vue組件、表格、表單、數(shù)據(jù)綁定、接口請求之類的其實(shí)都差不多就不說了。

按鈕級權(quán)限

前面章節(jié)中實(shí)現(xiàn)了菜單權(quán)限的控制，按鈕權(quán)限的道理也是一樣的。判斷abpConfig.auth.grantedPolicies是否包含某個(gè)權(quán)限，然后在組件中使用v-if渲染就好了。

srcutilsabp.js：

export function checkPermission(policy) { const abpConfig = store.getters.abpConfig; if (abpConfig.auth.grantedPolicies[policy]) { return true; } else { return false; }}

srcviewsidentityroles.vue：

<el-buttontype='primary' icon='el-icon-edit' @click='handleCreate' v-if='checkPermission(’AbpIdentity.Roles.Create’)'> {{ $t('AbpIdentity[’NewRole’]') }}</el-button>

身份認(rèn)證管理

角色和用戶的增刪改查就不說了，這里要注意一下權(quán)限管理。用戶和角色都需要用到權(quán)限管理，在ABP Angular版中是一個(gè)獨(dú)立的permission-management模塊。我這里也把他作為一個(gè)公用組件，根據(jù)providerName來區(qū)分，'R'是角色權(quán)限，'U'是用戶權(quán)限。

R/U權(quán)限

他們有一點(diǎn)區(qū)別，用戶權(quán)限可能來自于角色權(quán)限，所以用戶中的權(quán)限需要顯示是來自哪個(gè)providerName和providerKey，如果來自其他provider則disabled，不可以修改。

srcviewsidentitycomponentspermission-management.vue：

<el-form label-position='top'> <el-tabs tab-position='left'> <el-tab-pane v-for='group in permissionData.groups' :key='group.name' :label='group.displayName' > <el-form-item :label='group.displayName'><el-tree ref='permissionTree' :data='transformPermissionTree(group.permissions)' :props='treeDefaultProps' show-checkbox check-strictly node-key='name' default-expand-all/> </el-form-item> </el-tab-pane> </el-tabs></el-form>

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;}

權(quán)限刷新

還有一個(gè)細(xì)節(jié)問題，如果正在修改的權(quán)限影響到了當(dāng)前用戶，如何立即生效。

srcviewsidentitycomponentspermission-management.vue：

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 ); });

srcutilsabp.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的角色不可以刪除，并且不可以修改名稱；新增用戶和編輯用戶的密碼校驗(yàn)規(guī)則需要區(qū)別對待；保存權(quán)限是差異保存。等等。。。有條件的可以看一下ABP的Angular代碼。

租戶管理

基本功能界面都差不多。。。但是這里有一個(gè)”管理功能“的選項(xiàng)，默認(rèn)是顯示”沒有可用的功能“：

這玩意在界面上沒地方添加，也沒地方刪除，但是這個(gè)功能相當(dāng)實(shí)用。它來自ABP的FeatureManagement模塊，也稱為”特征管理“，這個(gè)后面再做介紹。

租戶切換

完成了租戶管理，那么登錄時(shí)也應(yīng)該可以切換租戶。

切換租戶比較簡單，就是根據(jù)輸入的租戶名稱獲取到租戶ID，然后調(diào)用/abp/application-configuration接口，把租戶ID放到請求Header的__tenant字段中即可，之后的請求中也需要這個(gè)參數(shù)，不傳的話就是默認(rèn)的宿主端。

其實(shí)ABP后端是可以配置是否啟用多租戶的，這里也可以根據(jù)后端配置來顯示或者隱藏租戶切換的按鈕。跟ABP模板相比，登錄界面還缺少一個(gè)注冊入口，后面再加上吧。

效果

最后

前端部分的模塊開發(fā)就不再詳細(xì)介紹了，主題還是ABP。進(jìn)行到這里，ABP模板自帶的前端部分功能就差不多完成了，需要代碼的可以去 https://github.com/xiajingren/HelloAbp 拉取，后面我再把文件整理一下，弄一個(gè)干凈的vue版本。

以上就是詳解vue身份認(rèn)證管理和租戶管理的詳細(xì)內(nèi)容，更多關(guān)于vue身份認(rèn)證管理和租戶管理的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！