角度ルーティングガードについて話す

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

はじめに

エンタープライズアプリケーションでは、権限、複雑なページのマルチルートデータ処理、およびエントリと出口のルーティングデータ処理が非常に一般的な要件です。

ユーザーが通常の編集ページを離れ、本当に退室したい場合にユーザーに割り込んで思い出させるために、Angularで何をすべきですか?

実際、角度ルーティングガード属性は、より意味のあるものを実行するのに役立ち、非常に簡単です。

ルートガードとは何ですか?

よく知られているpathcomponentに加えて、Angular's Routeルーティングパラメータには、ルートを有効または無効にする4つの属性が含まれています。

canActivate

アクセスを許可するかどうかを制御します。

canActivateChild

canActivateと同等ですが、すべてのサブルートに対してです。

canDeactivate

ルートを離れるかどうかを制御します。

canLoad

モジュール全体の遅延ロードを許可するかどうかを制御します。

例えば:

コードを次のようにコピーします。
{パス: '論理'、loadChildren: './logics/logics.module#LogicsModule'、canLoad:[AuthGuard]}

これら4つの属性は非常によく理解されており、機能が異なります。 それで、入退室が効果的な支配力を持つことができれば、私が以前に言及した問題のいくつかについては非常にうまく対処できます。

どのように作成する?

4つの属性の名前は異なりますが、基本的な使用法は非常に似ています。 4つの異なるガード方法は、それらに対応する4つの異なるインターフェースを有する。

属性名 インターフェイス名
canActivate CanActivate
canActivateChild CanActivateChild
canDeactivate CanDeactivate <TComponent>
canLoad CanLoad

canDeactivateは特定のコンポーネントクラス名を指定する必要があり、他のインターフェースは最初の文字を大文字にするだけです。 特定のルートにアクセスするために役割が必要であると仮定すると、 CanActivateガードクラスが必要です。


@Injectable()
export class CanAdminProvide implements CanActivate {
constructor(private userSrv: UserService, private msg: NzMessageService) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
return new Observable((observer) => {
// 拥有 `admin` 角色
if (this.userSrv.hasRole('admin')) {
observer.next(true);
observer.complete();
return;
}
this.msg.error('授权不足');
observer.next(false);
observer.complete();
});
}
}

つまり、CanActivateを継承し、canActivateというメソッドを実装し、ブール値を返します。

4種類のガードインターフェースはすべて、ブール型の値を返します。実際には、これらの4つのパラメーターの名前の先頭から理解されています。

最後に、適切なルートに適用します。たとえば、次のようにします。

コードを次のようにコピーします。
{パス: 'admin'、コンポーネント:GuardAdminComponent、canActivate:[CanAdminProvide]}

もちろん、CanAdminProvideクラスを登録することを忘れないでください。

いくつかの練習

出発時に思い出させる

4人のガードにはcanDeactivateという1つのタイプの休暇しかありませんので、


@Injectable()
export class CanLeaveProvide implements CanDeactivate<GuardComponent> {
constructor (private confirmSrv: NzModalService) {}
canDeactivate(
component: GuardComponent,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState?: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
return new Observable((observer) => {
this.confirmSrv.confirm({
title: '确认要离开吗?',
content: '你已经填写了部分表单离开会放弃已经填写的内容。',
okText: '离开',
cancelText: '取消',
onOk: () => {
observer.next(true);
observer.complete();
},
onCancel: () => {
observer.next(false);
observer.complete();
}
});
});
}
}

これはObservable型を返します。つまり、メソッドの本体で何かを行うことができ、結果にそのまま使用できます。


// 允许
observer.next(true); 
// 或拒绝
// observer.next(false);
observer.complete();

Observableの結果を処理するために、プロセス全体が完了します。 ユーザーがブラウザまたは別のページに戻ると、最初にアラートが送信されます。

上記で使用されている「ng-zorro-antd」確認ダイアログでは、ユーザーは退出する必要があるかどうかを思い出させます。[Leave]を選択すると、ルートは目的地ルートにリダイレクトされます。

限られた役割

これは通常の機能です。ユーザーが不正ルートを入力した場合、モジュールのロードを遅らせるルートでもあります。ユーザーに許可がない場合、ユーザーに通知する方法。

この時点で、canActivateとcanLoadは便利です。 管理者ロールは、管理モジュールと管理ページの下にあるすべての管理機能をロードできると仮定します。インターフェイスの多重継承の特性に基づいて、両方のインターフェイスを同時に継承できます。


@Injectable()
export class CanAuthProvide implements CanActivate, CanLoad {
constructor(private userSrv: UserService, private msg: NzMessageService) {}
check(): Observable<boolean> {
return new Observable((observer) => {
if (this.userSrv.isLogin) {
observer.next(true);
observer.complete();
return;
}
this.msg.error('权限不足');
observer.next(false);
observer.complete();
});
}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
return this.check();
}
canLoad(route: Route): boolean | Observable<boolean> | Promise<boolean> {
return this.check();
}
}

したがって、クラス内で2つの異なるガードを持つ能力は、コード構成にとってよりエレガントです。 再度、対応するルートに適用する必要があります。


{ path: 'auth', component: GuardAuthComponent, canActivate: [ CanAuthProvide ] },
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [ CanAuthProvide ] }

その後、通常の従業員アカウントが(ブラウザのアドレスバーが入力されていても)入力したい場合、権限のないルート/認証は許可の不足を促します。

要約

ルーティングガードは許可制御に非常に便利ですが、粒度はページレベルでのみ可能です。 ボタンの細分性にコマンドモードを使用する必要がある場合、2つの組み合わせにより、権限コントロールのコード量が大幅に向上します。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ