"Tips：本篇已加入系列文章阅读目录，可点击查看更多相关文章。目录前言开始按钮级权限身份认证管理 R/U 权限权限刷新租户管理租户切换效果最后前言上一篇介绍了 vue+ABP 国际化的基本实现，本篇开始功能模块的开发，首先完成 ABP 模板自带的身份认证管理模块和租户管理模块 ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 13 浏览 • 4 个月前

初识ABP vNext（7）：vue身份认证管理&租户管理

Tips：本篇已加入系列文章阅读目录，可点击查看更多相关文章。

前言

上一篇介绍了 vue+ABP 国际化的基本实现，本篇开始功能模块的开发，首先完成 ABP 模板自带的身份认证管理模块和租户管理模块。同样的，参考 ABP 的 Angular 版本来做。

开始

功能模块的开发往往是最容易的，但是要处理好每个细节就不容易了。就拿这里的身份认证管理模块来说，看似很简单，因为后端接口都是 ABP 模板里现成的，前端部分无非就是写界面，调接口，绑数据；但是看一下 ABP Angular 版本的代码，就会发现他其实是有很多细节方面的处理的。

回到 vue，因为前端部分的代码文件太多，下面只列出一些需要注意的细节，其他的像 vue 组件、表格、表单、数据绑定、接口请求之类的其实都差不多就不说了。

按钮级权限

前面章节中实现了菜单权限的控制，按钮权限的道理也是一样的。判断 abpConfig.auth.grantedPolicies 是否包含某个权限，然后在组件中使用v-if渲染就好了。

src\utils\abp.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：

<el-button
  class="filter-item"
  style="margin-left: 10px;"
  type="primary"
  icon="el-icon-edit"
  @click="handleCreate"
  v-if="checkPermission('AbpIdentity.Roles.Create')"
>
  {{ $t("AbpIdentity['NewRole']") }}
</el-button>

身份认证管理

角色和用户的增删改查就不说了，这里要注意一下权限管理。用户和角色都需要用到权限管理，在 ABP Angular 版中是一个独立的 permission-management 模块。我这里也把他作为一个公用组件，根据 providerName 来区分，"R" 是角色权限，"U" 是用户权限。

R/U 权限

他们有一点区别，用户权限可能来自于角色权限，所以用户中的权限需要显示是来自哪个 providerName 和 providerKey，如果来自其他 provider 则 disabled，不可以修改。

src\views\identity\components\permission-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;
}

权限刷新

还有一个细节问题，如果正在修改的权限影响到了当前用户，如何立即生效。

src\views\identity\components\permission-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
    );
  }
);

src\utils\abp.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.<span class="hljs-title function_">dispatch</span>(<span class="hljs-string">"user/setRoles"</span>, abpConfig.<span class="hljs-property">currentUser</span>.<span class="hljs-property">roles</span>);

  <span class="hljs-keyword">const</span> grantedPolicies = abpConfig.<span class="hljs-property">auth</span>.<span class="hljs-property">grantedPolicies</span>;

  <span class="hljs-comment">// generate accessible routes map based on grantedPolicies</span>
  store
    .<span class="hljs-title function_">dispatch</span>(<span class="hljs-string">"permission/generateRoutes"</span>, grantedPolicies)
    .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">accessRoutes</span> =&gt;</span> {
      <span class="hljs-comment">// dynamically add accessible routes</span>
      router.<span class="hljs-title function_">addRoutes</span>(accessRoutes);
    });

  <span class="hljs-comment">// reset visited views and cached views</span>
  <span class="hljs-comment">//store.dispatch("tagsView/delAllViews", null, { root: true });</span>
});

}
}