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 は

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

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

。実行後、Angular CLI はどのインターフェイスを実装する必要があるかを尋ねます。それを直接確認するだけです: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div> 説明:

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

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]
  }
]