[解決済み] すべてのルートにcanActivateガードを適用するには?
2023-03-17 16:34:08
質問
angular2のアクティブガードで、ユーザーがログインしていない場合、ログインページにリダイレクトするような処理をしています。
import { Injectable } from "@angular/core";
import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
import {Observable} from "rxjs";
import {TokenService} from "./token.service";
@Injectable()
export class AuthenticationGuard implements CanActivate {
constructor (
private router : Router,
private token : TokenService
) { }
/**
* Check if the user is logged in before calling http
*
* @param route
* @param state
* @returns {boolean}
*/
canActivate (
route : ActivatedRouteSnapshot,
state : RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
if(this.token.isLoggedIn()){
return true;
}
this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url }});
return;
}
}
のようにルート毎に実装する必要がありますね。
const routes: Routes = [
{ path : '', component: UsersListComponent, canActivate:[AuthenticationGuard] },
{ path : 'add', component : AddComponent, canActivate:[AuthenticationGuard]},
{ path : ':id', component: UserShowComponent },
{ path : 'delete/:id', component : DeleteComponent, canActivate:[AuthenticationGuard] },
{ path : 'ban/:id', component : BanComponent, canActivate:[AuthenticationGuard] },
{ path : 'edit/:id', component : EditComponent, canActivate:[AuthenticationGuard] }
];
canActiveオプションを各パスに追加することなく実装する良い方法はないでしょうか。
私が欲しいのは、メインルートにそれを追加し、他のすべてのルートにそれを適用することです。たくさん検索しましたが、有用な解決策は見つかりませんでした。
ありがとうございます。
どのように解決するのですか?
コンポーネントレスの親ルートを導入し、そこにガードを適用すればよいでしょう。
const routes: Routes = [
{path: '', canActivate:[AuthenticationGuard], children: [
{ path : '', component: UsersListComponent },
{ path : 'add', component : AddComponent},
{ path : ':id', component: UserShowComponent },
{ path : 'delete/:id', component : DeleteComponent },
{ path : 'ban/:id', component : BanComponent },
{ path : 'edit/:id', component : EditComponent }
]}
];
関連
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angular 2: 反応するフォームコントロールの反復処理
-
[解決済み] angular-cliのパラメータ --base-href と --deploy-url の違いは何ですか?
-
[解決済み] Angular 2のFormGroupからすべての検証エラーを取得する
-
[解決済み] angular-cli server - APIリクエストを別のサーバーにプロキシする方法は?
-
[解決済み] 角度の2つのスイッチケース値
-
[解決済み] コンポーネントではなくクラスにサービスをインジェクトする方法
-
[解決済み] Angular2 Tutorial (Tour of Heroes)です。モジュール 'angular2-in-memory-web-api' を見つけることができません。
-
[解決済み] Angular2で複数のルートパラメータを渡す
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] .tsファイルはTypeScriptのコンパイルの一部ですが、使用されていませんという警告を消すには?
-
[解決済み] Angularでコンポーネントをリフレッシュする方法
-
[解決済み] angular4 / typescriptでdocument.getElementByIdの置き換え?
-
[解決済み] タイプスクリプト タイプ X はタイプ Y の length、pop、push、concat、その他 26 のプロパティが欠落しています。[2740]
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
-
[解決済み] AngularでFormGroupに動的にaddControlを追加する
-
[解決済み] angularで「タイプ 'EventEmitter' は一般的ではありません」ERROR。
-
[解決済み] 角度換算2
-
[解決済み] Angular - ngForの中のngIfの中のパラメータを持つng-template [重複]。
-
[解決済み] Angular2で複数のルートパラメータを渡す