概要機能モジュールの開発は最も簡単な場合が多いですが、細部まですべて処理するのは簡単ではありません。ここで、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の他の関連記事に注目してください! 以下もご興味があるかもしれません:
|
>>: Windowsにmysql5.7をインストールする方法
/etc/yum.repos.d/フォルダに入るrabbitmq-erlang.repo ファイルを...
Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...
この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...
目次空の文字列 '' と null を比較するケース1: 空の文字列を使用する ...
1. はじめに今日、同僚から、MySQL を使用して ElasticSearch に似た全文検索機能...
問題の説明:最近、rsyncで毎回同期するデータ量が多いが、データベースのbakファイルを保持する必...
序文docker run がコンテナを作成して実行するときに、-p を使用してポート マッピング ル...
結果から判断すると、タイトルを定義するための固定パターンはなく、すべてむしろランダムな感じがします。...
目次1. 現状2. コミュニティソリューション2.1 事業レビュー3. 技術的ソリューション3.1....
最近 Django を導入しましたが、MySQL を手動でインストールしたくなかったので、Docke...
<テンプレート> <div class="demo">...
状況の説明: データベースが異常に起動およびシャットダウンしたため、サービスを再度起動したときに「起...
プロパティやイベントがあるにもかかわらず、JavaScript で子コンポーネントに直接アクセスする...
Windows Server 2012 と Windows Server 2008 では、デスクトッ...
目次序文1. 文字列を分割する2. JSONのフォーマットと解析3. 複数行の文字列と埋め込み式4....