使用vue怎么實(shí)現(xiàn)身份認(rèn)證管理和租戶(hù)管理功能

本篇文章為大家展示了使用vue怎么實(shí)現(xiàn)身份認(rèn)證管理和租戶(hù)管理功能，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

按鈕級(jí)權(quán)限

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"
  
  type="primary"
  icon="el-icon-edit"
  @click="handleCreate"
  v-if="checkPermission('AbpIdentity.Roles.Create')"
>
  {{ $t("AbpIdentity['NewRole']") }}
</el-button>

身份認(rèn)證管理

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

R/U權(quán)限

他們有一點(diǎn)區(qū)別，用戶(hù)權(quán)限可能來(lái)自于角色權(quán)限，所以用戶(hù)中的權(quán)限需要顯示是來(lái)自哪個(gè)providerName和providerKey，如果來(lái)自其他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;
}

權(quán)限刷新

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

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

還有很多需要注意的，比如isStatic===true的角色不可以刪除，并且不可以修改名稱(chēng)；新增用戶(hù)和編輯用戶(hù)的密碼校驗(yàn)規(guī)則需要區(qū)別對(duì)待；保存權(quán)限是差異保存。等等。。。有條件的可以看一下ABP的Angular代碼。

租戶(hù)管理

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

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

租戶(hù)切換

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

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

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

效果

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪(fǎng)問(wèn)速度和用戶(hù)體驗(yàn)。

上述內(nèi)容就是使用vue怎么實(shí)現(xiàn)身份認(rèn)證管理和租戶(hù)管理功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。