VueのID認証管理とテナント管理の詳細な説明

VueのID認証管理とテナント管理の詳細な説明

概要

機能モジュールの開発は最も簡単な場合が多いですが、細部まですべて処理するのは簡単ではありません。ここで、ID 認証管理モジュールを例に挙げてみましょう。バックエンド インターフェースはすべて ABP テンプレートで用意されており、フロントエンド部分はインターフェースの作成、インターフェースの呼び出し、データのバインドだけなので、非常にシンプルに見えます。ただし、ABP Angular バージョンのコードを見ると、実際には処理すべき詳細がたくさんあることがわかります。

Vue に戻りますが、フロントエンド部分にはコード ファイルが多すぎるため、注意が必要な詳細のみが以下にリストされています。Vue コンポーネント、テーブル、フォーム、データ バインディング、インターフェイス リクエストなどの他のものは実際にはほとんど同じであるため、ここでは説明しません。

ボタンレベルの権限

前の章では、メニュー権限の制御を実装しましたが、同じ原則がボタン権限にも適用されます。 abpConfig.auth.grantedPolicies に特定の権限が含まれているかどうかを確認し、コンポーネントで v-if レンダリングを使用します。

src\utils\abp.js:

エクスポート関数 checkPermission(policy) {
  abpConfig を store.getters.abpConfig に格納します。
  if (abpConfig.auth.grantedPolicies[ポリシー]) {
    true を返します。
  } それ以外 {
    false を返します。
  }
}

src\views\identity\roles.vue:

<el-ボタン
  クラス="フィルター項目"
  スタイル="margin-left: 10px;"
  タイプ="プライマリ"
  アイコン="el-icon-edit"
  @click="ハンドル作成"
  v-if="checkPermission('AbpIdentity.Roles.Create')"
>
  {{ $t("AbpIdentity['新しい役割']") }}
</el-button>

アイデンティティ認証管理

ロールやユーザーの追加、削除、変更、確認については説明しません。ここでは権限管理に注意する必要があります。ユーザーとロールの両方に権限管理が必要です。これは、ABP Angular バージョンの独立した権限管理モジュールです。ここでもパブリック コンポーネントとして扱い、providerName によって区別します。「R」はロール権限、「U」はユーザー権限です。

R/U 権限

これらには若干の違いがあります。ユーザー権限はロール権限から取得される場合があるため、ユーザーの権限には、権限がどの providerName および providerKey から取得されるかが示されている必要があります。権限が他のプロバイダーから取得される場合は無効になっており、変更できません。

src\views\identity\components\permission-management.vue:

<el-form ラベル位置="top">
  <el-tabs タブ位置="左">
    <el-タブ-ペイン
      v-for="permissionData.groups 内のグループ"
      :key="グループ名"
      :label="グループ.表示名"
    >
      <el-form-item :label="グループ.表示名">
        <el-tree
          ref="パーミッションツリー"
          :data="transformPermissionTree(グループ.権限)"
          :props="ツリーのデフォルトプロパティ"
          チェックボックスを表示
          厳密にチェックする
          ノードキー="名前"
          デフォルトすべて展開
        />
      </el-form-item>
    </el-tab-pane>
  </el-tabs>
</el-form>
transformPermissionTree(権限、名前 = null) {
  arr = [] とします。
  if (!permissions || !permissions.some(v => v.parentName == name))
    arr を返します。
  const 親 = 権限.フィルター(v => v.parentName == 名前);
  (let i in 親) {
    ラベルを '' とします。
    if (this.permissionsQuery.providerName == "R") {
      ラベル = 親[i].displayName;
    } そうでない場合 (this.permissionsQuery.providerName == "U") {
      ラベル =
        親[i].表示名 +
        " " +
        親[i].grantedProviders.map(プロバイダー => {
          `${provider.providerName}: ${provider.providerKey}` を返します。
        });
    }
    arr.push({
      名前: 親[i].名前,
      ラベル、
      無効: this.isGrantedByOtherProviderName(
        親[i].grantedProviders
      )、
      子: this.transformPermissionTree(権限、親[i].name)
    });
  }
  arr を返します。
},
他のプロバイダー名によって許可される(許可されたプロバイダー) {
  (付与されたプロバイダーの長さ)の場合{
    戻る (
      付与されたプロバイダー.findIndex()
        p => p.providerName !== this.permissionsQuery.providerName
      ) > -1
    );
  }
  false を返します。
}

権限の更新

詳細な問題もあります。変更される権限が現在のユーザーに影響する場合、どうすればすぐに有効にできるのでしょうか。

src\views\identity\components\permission-management.vue:

updatePermissions(this.permissionsQuery, { 権限: tempData }).then(
  () => {
    this.dialogPermissionFormVisible = false;
    これを通知します。{
      タイトル: this.$i18n.t("HelloAbp['Success']"),
      メッセージ: this.$i18n.t("HelloAbp['SuccessMessage']"),
      タイプ: "成功",
      期間: 2000
    });
    フェッチAppConfig(
      this.permissionsQuery.providerKey、
      this.permissionsQuery.providerName
    );
  }
);

src\utils\abp.js:

関数 shouldFetchAppConfig(プロバイダーキー、プロバイダー名) {
  現在のユーザーを store.getters.abpConfig.currentUser に格納します。

  (プロバイダー名 === "R") の場合
    currentUser.roles.some(role => role === providerKey) を返します。

  (providerName === "U") の場合、currentUser.id === providerKey を返します。

  false を返します。
}
エクスポート関数 fetchAppConfig(providerKey, providerName) {
  if (shouldFetchAppConfig(providerKey, providerName)) {
    store.dispatch("app/applicationConfiguration").then(abpConfig => {
      ルータをリセットします。

      store.dispatch("user/setRoles", abpConfig.currentUser.roles);

      const grantedPolicies = abpConfig.auth.grantedPolicies;

      // grantPolicies に基づいてアクセス可能なルートマップを生成する
      店
        .dispatch("permission/generateRoutes", 許可されたポリシー)
        .then(アクセスルート => {
          // アクセス可能なルートを動的に追加
          ルータにルートを追加します。
        });

      // 訪問したビューとキャッシュされたビューをリセットする
      //store.dispatch("tagsView/delAllViews", null, { root: true });
    });
  }
}

注意すべき点はたくさんあります。たとえば、isStatic===true のロールは削除できず、名前も変更できません。新しいユーザーの追加とユーザーの編集のパスワード検証ルールは別々に扱う必要があります。また、保存権限は別々に保存されます。等。 。条件が整えば、ABP の Angular コードを確認できます。

テナント管理

基本的な機能インターフェースは似ています。 。 。ただし、「機能を管理する」オプションがあり、デフォルトでは「利用可能な機能はありません」と表示されます。

インターフェースにはこれを追加したり削除したりする場所はありませんが、この機能は非常に実用的です。これは、後で紹介する「機能管理」とも呼ばれる ABP の FeatureManagement モジュールから取得されます。

テナント切り替え

テナント管理が完了すると、ログイン時にテナントを切り替えることができるようになります。

テナントの切り替えは比較的簡単です。入力したテナント名に基づいてテナント ID を取得し、/abp/application-configuration インターフェイスを呼び出して、テナント ID をリクエスト ヘッダーの __tenant フィールドに配置するだけです。このパラメータは、後続のリクエストでも必要です。渡されない場合、デフォルトのホストが使用されます。

実際、ABP バックエンドはマルチテナントを有効にするように構成できます。ここで、バックエンドの構成に応じて、テナント切り替えボタンを表示または非表示にすることもできます。 ABP テンプレートと比較すると、ログイン インターフェイスにはまだ登録エントリがありませんが、これは後で追加される予定です。

効果

やっと

フロントエンド部分のモジュール開発については詳しく紹介しませんが、テーマは引き続き ABP です。この時点で、ABP テンプレートのフロントエンド機能はほぼ完成しています。コードが必要な場合は、https://github.com/xiajingren/HelloAbp にアクセスして取得できます。後でファイルを整理して、クリーンな vue バージョンを作成します。

以上がVueのアイデンティティ認証管理とテナント管理の詳細な説明です。Vueのアイデンティティ認証管理とテナント管理の詳細については、123WORDPRESS.COMの他の関連記事に注目してください!

以下もご興味があるかもしれません:
  • VueルーティングでJWT認証を実装する方法
  • Vue ダイナミック バインディング アイコンの完全な手順
  • Vueカスタムコンポーネントはイベント修飾子を使用してピットレコードを踏む
  • Vue 名前付きスロットの基本的な使用例
  • Vue 初心者ガイド: 最初の Vue-cli スキャフォールディング プログラムの作成
  • Vue は左右のスライド効果のサンプルコードを実装します
  • VueとFlask間の通信の実装
  • Vueは双方向データバインディングを実装します
  • Vue 3.0 カスタムディレクティブの使い方

<<:  Linuxでディスクをマウントする方法

>>:  Windowsにmysql5.7をインストールする方法

推薦する

Docker を使ってゼロから SOLO 個人ブログを構築する方法

目次1. 環境整備2. Dockerをインストールする3. MySQLマスタースレーブデータベースを...

mysql explain(分析インデックス)の使い方の詳しい説明

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

通知メッセージカルーセルを実装するための CSS3 トランジション

Vueバージョンをファイルにコピーして使用します <テンプレート> <!-- カル...

JS addEventListener() およびattachEvent() メソッドは登録イベントを実装します

JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...

JavaScript の BigIn 関数の共通プロパティをまとめます

目次1. 概要2. 属性1. 数学演算子2. 比較演算子3. ブール演算結論1. 概要BigInt ...

MySQLシリーズ マルチテーブル結合クエリ92および99構文例詳細チュートリアル

目次1. デカルト積現象2. 接続クエリの知識ポイントのまとめ1) 結合クエリとは何ですか? 2) ...

JavaScript プロトタイプチェーンを理解するための 2 つの図

目次1. プロトタイプの関係2. プロトタイプチェーン3. 結論序文:前回の記事では、JavaScr...

CocosCreatorで複数のタイマーを使用する方法の詳細な説明

1.タイムアウトを設定する3 秒後に abc を印刷します。一度だけ実行します。 setTimeou...

JavaScript が Jingdong の虫眼鏡効果を模倣

この記事では、Jingdongの虫眼鏡効果を実現するためのJavaScriptの具体的なコードを紹介...

DockerにElasticsearch7.6クラスタをインストールしてパスワードを設定する方法

目次基本的な設定バージョンとDockerイメージについて始めるelasticsearch.ymlにつ...

Docker Gitlab+Jenkins+Harborは永続的なプラットフォーム運用を構築します

CI/CD の概要CIワークフロー設計Gitコードバージョン管理システムはコマンドラインでのみ管理で...

IE6はmin-widthを実装している

まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...

MySQL ストアド プロシージャ関連の権限変更の問題

MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...

MySQLクエリステートメントの簡単な操作例

この記事では、例を使用して、MySQL クエリ ステートメントの簡単な操作を説明します。ご参考までに...

iframeを透明にするパラメータ

<iframe src="./ads_top_tian.html" all...