角度ルータガードの設定

Question

Angularのルータで使用されるcanActivateガードを設定する方法はありますか。

@Injectable() 
export class SessionGuard implements CanActivate { 

    public requireLeagues: boolean = true; 

    constructor(private authService: AuthService, private session: SessionService, private router: Router) { 
    } 


    async canActivate(): Promise<boolean> { 
     if (!this.authService.isLoggedIn) { 
      return false; 
     } 

     await this.session.start(); 

     if (this.requireLeagues && (!this.session.leagues || this.session.leagues.length == 0)) { 
      //Redirect to create league page 
      this.router.navigate(['/create-league']); 

      return false; 
     } else { 
      return true; 
     } 
    } 
} 

そして、このルート：このSessionGuard持つ

const routes: Routes = [ 
    {path: '', component: HomeComponent, canActivate: [AuthGuard, SessionGuard]},// <-- requireLeagues = false 
    {path: 'login', component: LoginComponent}, 
    {path: 'leagues', component: [AuthGuard, SessionGuard]}, 
]; 
@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { 
} 

を私は新しい、さまざまなガードを作成する必要がwithouthルートに応じてtrueまたはfalseにrequireLeaguesを設定したいと思います。これは可能ですか？

Answer 1

はい、canActivateメソッドには現在のActivatedRouteSnapshotとRouterStateSnapshotが渡されます。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    this.requireLeages = route.params... // something from route 
} 

ここにはActivatedRouteSnapshotのdocsがあります。ルートとサービス間で共有する独自のデータを格納するために使用できるdataプロパティなど、多くの便利なプロパティがあります。