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 vNext（7）：vue身份认证管理&租户管理

身份认证管理

角色和用户的增删改查就不说了，这里要注意一下权限管理。用户和角色都需要用到权限管理，在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;

}

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

权限刷新

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

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

    });

  }

}