配置 Angular 路由器防护答案

【问题标题】：Configure Angular router guard配置 Angular 路由器防护
【发布时间】：2017-05-17 01:03:26
【问题描述】：

有没有办法配置 Angular 路由器中使用的 canActivate 保护？

有这个SessionGuard:

@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;
        }
    }
}

还有这条路线：

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 {
}

我想根据路线将requireLeagues 设置为true 或false，而不必创建新的、不同的警卫。这可能吗？

【问题讨论】：

标签： angular angular-routing angular2-guards angular-router-guards

【解决方案1】：

是的，canActivate 方法通过了当前的ActivatedRouteSnapshot 和RouterStateSnapshot。

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

这是 ActivatedRouteSnapshot 的 docs。它有很多有用的属性，包括一个data 属性，您可以使用它来存储您自己的数据以在路由和服务之间共享。

【讨论】：