Question

问题：根据用户的许可，应使用其他默认路由。

@RouteConfig([
    { path: '/x1', name: 'x1', component: X1Component, useAsDefault: true },
    { path: '/x2', name: 'x2', component: X2Component},
    { path: '/x3', name: 'x3', component: X3Component},
    { path: '/x4', name: 'x4', component: X4Component},
    { path: '/x5', name: 'x5', component: X5Component}
])

在上面x1中将RouteConfig作为默认路由，但当前用户无权访问此页面，如果将授予权限，x2应被用作默认路由，因此上。

无论如何，我们已经尝试了属性loader。问题是，网址不会更新（例如从/x1更新到x2），这会发生其他问题，例如没有自动附加css类router-link-active我们菜单中的链接。

当然我们可以写一个解决方法，但你是如何解决这类问题的呢？

Answer 1

我不认为在运行时可以更改哪条路线是默认路线。

我认为一种常见的方法是在需要登录的组件中添加@CanActivate()装饰器，如果用户实际上没有登录，则重定向到相应的路径。

要了解当前用户是否已登录，您可能希望使用DI获取有关用户状态的全局信息您还需要一个可以从DI获得的根路由器实例的引用。目前不直接支持在@CanActivate()中使用DI，但related Angular2 issue中的讨论提供了一种解决方法（使用Plunker链接）来获取对全局注入器的引用。

另见Redirect to a different component inside @CanActivate in Angular2

Answer 2

要动态更改 Angular 应用程序的默认路由，目前我正在使用以下方法。

有守卫的最后一条后备路线：

...
{
    path: '**',
    canActivate: [DynamicDefaultRouteGuard],
    pathMatch: 'full'
}

守卫如下：

@Injectable({
    providedIn: 'root'
})
export class DynamicDefaultRouteGuard implements CanActivate {
    constructor(private router: Router, private dynamicDefaultMenuSectionService: DynamicDefaultMenuSectionService) {}

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        console.warn(
            `Fallback main module route reached. Redirecting to ${this.dynamicDefaultMenuSectionService.defaultMenuSection}...`
        );

        return this.router.createUrlTree([this.dynamicDefaultMenuSectionService.defaultMenuSection]);
    }
}

其中 dynamicDefaultMenuSectionService.defaultMenuSection 是一个带有默认路由的变量。此变量在应用初始化 (APP_INITIALIZER) 期间初始化，但可以随时更改。

如何在Angular2中使用动态默认路由？

2 个答案: