Route Guard による Angular 学習ルートの簡単な分析

この記事では、Angular のルート ガードについて学び、ルート ガードの作成方法、ルートをアクティブ化できるかどうかの制御、およびルートの終了が可能かどうかの制御方法を紹介します。

環境:

• Angular CLI: 11.0.6

• 角度: 11.0.7

• ノード: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

##実際のビジネス開発プロセスでは、次の要件に遭遇することがよくあります。

#これは必要です。特定の URL へのアクセスを制限します。たとえば、システム管理インターフェイスの場合、管理者権限を持つユーザーのみが開くことができます。 [関連チュートリアルの推奨事項: "
• angular チュートリアル

  "]

ユーザーが編集インターフェイスを使用していて、保存せずに終了する場合、ユーザーは編集インターフェイスを放棄するかどうかを尋ねるプロンプトを表示する必要があります。修正。
上記のシナリオでは、Angualr は

Route Guards

(ルート ガード) を使用して実装します。 ルート ガード

1. ルート ガードの作成Angular CLI は、ルート ガードを迅速に作成できるコマンド ライン ツールを提供します。ルーティング ガード フレームワーク ファイル:

ng ガード認証を生成します

。実行後、Angular CLI はどのインターフェイスを実装する必要があるかを尋ねます。それを直接確認するだけです: <pre class="brush:js;toolbar:false;">? Which interfaces would you like to implement? (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection) &gt;(*) CanActivate ( ) CanActivateChild ( ) CanDeactivate ( ) CanLoad</pre> 説明:

CanActivate: ルートが実行できるかどうかを制御します。 be activate
CanActivateChild: サブルートをアクティブ化できるかどうかを制御します
#CanDeactivate: ルートを終了できるかどうかを制御します

• #CanLoad : モジュールをロードできるかどうかを制御します。

• より一般的に使用されるのは 1 と 3 で、それぞれ開始と終了を制御します。上記の設定に従って、AngularCLI は次のコードを自動的に生成します。
return true;

は実際のコードに置き換えることができます。

return false; ジャンプや現在のページからのキャンセルが許可されていないことを示します。

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanDeactivate<unknown> {
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

canActivate メソッドでは、ジャンプも使用できます。たとえば、このページでは、ログインしているかどうかが判断されます。ログインしていない場合は、ログイン ページにジャンプします:

this.router.navigate(['/login']);
return false;

#2. ルーティングをアクティブ化できるかどうかを制御します

ルートをアクティブ化できるかどうかの制御は、ルートを定義し、canActivate 属性を追加する場所で定義する必要があります。必要に応じて、現在のルートに入るためにどの権限を確認する必要があるかを AuthGuard に指示するなど、データ属性を追加することもできます。 data 属性はオプションです。

const routes: Routes = [
  {
    path: "page1",
    component: Page1Component,
    data: { permissions: ['YourPage1Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  },
  {
    path: "page2",
    component: Page2omponent,
    data: { permissions: ['YourPage2Permission'] },  // 传入参数给AuthGuard，可选
    canActivate: [AuthGuard]
  }
]

3. ルートが終了 (退出) するかどうかの制御

は、ルートをアクティブ化できるかどうかの制御と似ています。 canDeactivate をルート定義に追加し、対応する Guard ガードを定式化します。これ以上の例はありません

概要

ルート ガードを介して URL の出入りを制御します。

• Angular CLI が役立ちますガード ファイルの作成は私たちに任せてください;

• プログラミング関連の知識の詳細については、

  プログラミング入門

  をご覧ください。 ！

以上がRoute Guard による Angular 学習ルートの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。