有没有比警卫更全面的方法来处理Angular2 rc3中的身份验证？

Question

我有一个现有的Angular2应用程序，其中通过创建AuthRouterOutletDirective扩展了的来处理登录/身份验证RouterOutlet。这样就可以轻松地componentInstruction在激活功能中使用它来检查用户是否已登录，如果没有将他们重定向到我们的登录门户（由于各种原因，我无法通过单独的应用程序对此进行控制，该应用程序具有自己的登录屏幕，然后在导航到下一个组件之前发回一个令牌，该令牌将保存在Angular2应用中。

我刚刚升级到路由器3.0.0-alpha.8，我发现这不再是一个选项，它已被创建authGuard并使用该canActivate方法处理身份验证代替（我指的是本部分）文档）。我正在努力解决的问题似乎是为仅受少量路由保护的应用程序而设计的，您可以将其添加canActivate: [AuthGuard]到需要在RouterConfig中进行身份验证的每个路由中。

我遇到的问题是每条路由都需要通过身份验证进行保护。还需要进行连续检查（除非有更好的解决方法），因为我们（同样由于部分原因，我们必须使用外部登录服务）将注销用户并清除其令牌，并且下次您导航至新路由（无论路由是什么），都应将您重定向以再次登录。我知道我可以只添加canActivate: [AuthGuard]到每条路由，但这似乎是一个疯狂而乏味的修复程序，尤其是对于具有大量路由的应用程序，所有这些都需要对用户进行身份验证才能查看。

我一直在寻找修复程序，但似乎（部分原因是由于升级是相当新的），所有资源都用于仅在一条或两条路线上实现这些AuthGuard。我一直在仔细研究源代码（具体在这里），以查看是否存在我可以扩展的另一种方法，该canActivate方法比使每个路由包括特定后卫的方法更全面或更通用，但是我似乎什么也找不到。任何关于如何最好地实现这一点的建议将不胜感激！谢谢。

Answer 1

参考我的评论，您可以添加额外的防护，如下所示：

import {provideRouter, RouterConfig, Route, CanActivate, ActivatedRouteSnapshot} from '@angular/router';
import {Injectable} from "@angular/core";

@Injectable()
class UniversalGuard implements CanActivate {
    canActivate(route: ActivatedRouteSnapshot) {
        console.log('applying can activate');
        return true;
    }
}

let routes: RouterConfig = [
    {path: 'path1', component: Component1} as Route,
    {path: 'path2', component: Component2} as Route,
    {path: 'path3', component: Component3} as Route
];

const routeAugumenter = route => {
    let guards = route.canActivate || [];
    guards.push(UniversalGuard);

    route.canActivate = guards;

    if (route.children) {
        route.children = route.children.map(routeAugumenter);
    }

    return route;
};

let augumentedRoutes = routes.map(routeAugumenter);

console.log(augumentedRoutes);

export const APP_ROUTER_PROVIDERS = [
    provideRouter(augumentedRoutes), UniversalGuard
];

我还没有用子路线测试过它，但应该也能工作。

编辑：更新了如何将服务注入到UniversalGuard.

如果您的守卫需要注入一些服务，您可以像往常一样将它们注入构造函数中。您必须在 Angular 引导调用中而不是在组件中提供这些服务（以及它们所依赖的服务等）。