web-dev-qa-db-ja.com

canActivate guardをすべてのルートに適用する方法は？

ユーザーがログインしていない場合にログインページにリダイレクトする、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オプションを各パスに追加せずに実装するより良い方法はありますか。

私が欲しいのはメインルートに追加することで、他のすべてのルートに適用する必要があります。私は多くを検索しましたが、有用な解決策を見つけることができませんでした

ありがとう

angulartypescriptangular-routing
50
Nimatullah Razmjo

コンポーネントなしの親ルートを導入して、そこでガードを適用できます。

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 }
    ]}
];
116
Günter Zöchbauer

App.componentのngOnInit関数でルーターのルート変更をサブスクライブし、そこから認証を確認することもできます。

    this.router.events.subscribe(event => {
        if (event instanceof NavigationStart && !this.token.isLoggedIn()) {
            this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url}}); 
        }
    });

私は、ルートが変更されたときに、あらゆる種類のアプリ全体のチェックを行うこの方法を好みます。

5
Alan Smith

親（たとえば「admin」というパス）とその子を持つことができる「子ルーティング」を実装する必要があると思います。

次に、canactivateを親に適用して、すべての子へのアクセスを自動的に制限できます。たとえば、「admin/home」にアクセスする場合は、canActivateで保護されている「admin」を確認する必要があります。必要に応じて、空のパス「」で親を定義することもできます

3
Simrugh