5

我有一个现有的 Angular2 应用程序，其中通过创建AuthRouterOutletDirective扩展RouterOutlet. 这使得componentInstruction在激活功能中使用来检查用户是否登录变得很容易，如果没有将他们重定向到我们的登录门户（由于各种原因，我无法控制这是通过一个单独的应用程序，它有自己的登录屏幕和然后在导航到下一个组件之前发回一个我们将保存在 Angular2 应用程序中的令牌。

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

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

我一直在寻找解决方案，但似乎部分原因是升级是相当新的，所有资源都用于如何仅在一两条路线上实施这些 AuthGuard。我一直在挖掘源代码（特别是这里），看看是否有另一种方法可以扩展，它比canActivate让每条路线都包含一个特定的守卫更全面或更通用的方法，但我似乎找不到任何东西。任何关于如何最好地实现这一点的建议将不胜感激！谢谢。

4

1 回答 1

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 引导调用而不是在组件中提供这些服务（以及它们所依赖的服务等）。

于 2016-07-13T09:42:24.500 回答