概述

功能模組的開發往往是最容易的，但是要處理好每個細節就不容易了。就拿這裡的身份認證管理模組來說，看似很簡單，因為後端介面都是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')"
>
 YCvkpHTEU
 
 {{ $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(granwww.cppcns.comtedProviders) {
  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.dispatch("user/setRoles",abpConfig.currentUser.roles);

      const grantedPolicies = abpConfig.auth.grantedPolicies;

      // generate accessible routes map based on grantedPolicies
      store
        .dispatch("permission/generateRoutes",grantewww.cppcns.comdPolicies)
        .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版本。

以上就是詳解vue身份認證管理和租戶管理的詳細內容，更多關於vue身份認證管理和租戶管理的資料請關注我們其它相關文章！