カスタム認証モードの実装

こんにちは、すべて、この記事では、我々はどのようにCandeActivateの方法を説明し、どのようにカスタム確認モードを我々のアプリのテーマに基づいて実装する必要があります.

ルータガード

角で、我々は我々が我々が現在の見解で進行中であるとき、ユーザーが視点から離れて動くのをどのように制限することができるかについて、CandeActivate Guardのために実装をするために我々が定義するルートのために建設サポートを得ます.例ユーザーは、彼のプロフィールページで編集をして、我々がCandeActivateのためにルータガードを実装したならば、その時、Saveボタンをクリックしませんでした、ユーザーは確認を求められます.
CandeActivateの典型的な実装は以下のようになります

canDeactivate(
    component: Component,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    return true;
  }

したがって、ここで注意することは、この関数が何を返すかを予想することです.私たちは真偽の正確な値を持っているか、あるいは真実であるか間違っているか、またはurltreeまたは直接urltreeを与える観察できるか約束を持つことができます.したがって、これを実装するたびに、上記と一致する戻り値の型を必ず確認してください.

実施例

それで、我々がどのように我々がこのガードを実質的に実行することができるかについて見ましょう.ガードサービスファイルを作成することから始めることができます.

ng g guard custom-guard

ここでは、異なるルータガードを利用できるようにするオプションを得ます

しかし、ここではCandeActivateを議論しているので、それを選択して進みます.
ここではユースケースがあります.2つのコンポーネントを持っていて、COM 1に実装されているルータガードを持っています.
完全な例は、Stackblitzで見られることができます
COP 1、COMP 2、MUSICモードで使用するコードについては、参照してください.ここではルートガードで使用されるコードについてお話します.

export class ConfirmguardGuard implements CanDeactivate<Comp1Component> {
  canDeactivate(
    component: Comp1Component,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    console.log('deactivate');
    let subject = new Subject<boolean>();
    component.openDialog();
    subject = component.subject;
    return subject.asObservable();
  }
}

とルートの配列オブジェクトの使用

const routes: Routes = [
  {
    path: 'comp1',
    canDeactivate: [ConfirmguardGuard],
    component: Comp1Component,
  },
  { path: 'comp2', component: Comp2Component },

  { path: '', redirectTo: 'comp1', pathMatch: 'full' },
];

これは私たちの作業ルータガードを持っているのを助ける簡単なコードです.我々は、このガードが期待しているものである観測可能なモーダル・ユーザー相互作用を扱うために我々が持っていた主題を変換している.ここでは、コンポーネントの変数に基づいたビジネスロジックを追加していません.さて、COMP 2をクリックすると、確認を求められます.そして、OKをクリックすると、あなたは離れてナビゲートされます.キャンセルに関しては、同じビューに残ります.ここで、candeactivateによって返される観測可能性は、それが得る最初の値を取るだけです.
この小さな例では、CandeActivateについて何か新しいことを理解するのに役立ちました.
あなたが好きなら、それはあなたの友人と共有してください、または任意の提案が私に到達した場合、または以下のコメント.
次回までハッピー学習!