路由器：顶级路由上的 CanActivate答案

【问题标题】：Router: CanActivate on top level route路由器：顶级路由上的 CanActivate
【发布时间】：2016-12-02 18:32:04
【问题描述】：

在加载应用程序之前，我想检查用户是否已登录并加载一些数据。因此我在最上面的路线上放了两个守卫，但他们没有被处决。不能把 canActivate 放在顶级路由上吗？守卫的放置位置有什么限制吗？

路由配置

export const routes = [
    {
        path: '',
        canActivate: [IsAuthenticatedGuard, IsDataLoadedGuard],
        children: [
            {
                path: '',
                redirectTo: '/something',
                pathMatch: 'full'
            }
        ]
    }
];

/something 是不同模块的一部分，使用 RouterModule.forChild() 将路由加载到另一个模块中

守卫

@Injectable()
export class IsAuthenticatedGuard implements CanActivate {

    constructor(private _router: Router) {}

    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> {
        if (!this._isSignedIn()) {
            window.location.replace('/signin.html');
            return Observable.of(false);
        }
        return Observable.of(true);
    }

    _isSignedIn(): boolean {
        return document.cookie.indexOf('jwt_cookie') !== -1;
    }
}


@Injectable()
export class IsDataLoadedGuard implements CanActivate {

    private homeState$: Observable<IHomeState>;

    constructor(private _router: Router, private _store: Store<IAppState>) {
        this.homeState$ = _store.select('home');
    }

    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> {
        return this.homeState$.map((homeState: IHomeState) =>
            !homeState.get('loading') || homeState.hasIn(['home', 'id'])
        );
    }
}

应用确实被重定向到/something，而它实际上应该重定向到/signin.html。我做错了什么？

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案1】：

您需要在父路由上使用 canActivateChild。请参阅文档here。如果您想要一个受保护的子路由，这很有用。您可以为它使用相同的类 IsAuthenticatedGuard。

【讨论】：

我试过了，但这也没有用，我会再试一次并报告观察到的行为。