javascript - 在 Angular 路由器的空路径上有条件地加载模块

Question

我正在尝试为未通过身份验证的访问者加载我的应用程序的主页。

const routes: Routes = [
    { path: '', loadChildren: './home/home.module#HomeModule' }
...

经过身份验证的用户应该通过该模块获取他们的提要，也在空路径上。

{ path: '', loadChildren: './feed/feed.module#FeedModule', canActivate: [IsAuthenticationGuard] },
{ path: '', loadChildren: './home/home.module#HomeModule', canActivate: [NoAuthenticationGuard] },

我希望 IsAuthenticationGuard 会失败并加载默认的主页组件。

相反，它会下载 feed 模块包(显示在网络选项卡中)，但不会在路由器 socket 中加载任何内容。非常困惑。

如何在空路径上进行条件路由(基于守卫或其他方式)？

更新:这是应要求提供的守卫

@Injectable()
export class IsAuthenticationGuard implements CanActivate {
    constructor(
        private authenticationService: AuthenticationService
    ) { }

    public canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> {
        return this.authenticationService.isAuthenticated.pipe(take(1), map((isAuthentication) => {
            return isAuthentication;
        }));
    }
}

我研究了新的 urlTree 很酷，您现在可以通过路由而不是在守卫内重定向。 但是，如果您尝试对不同的模块使用相同的路由，则重定向似乎不适用。如果有办法，请纠正我。

Answer 1

我认为您做错了几件事。

1. 你不应该用相同的路径定义两条路由。
2. 在你的守卫中， map 毫无意义。只要你的服务方法返回 Observable<boolean>你不需要映射它的值。
3. 另外，如果您没有返回 true，您还需要注意，您需要导航到其他模块的路径。为此，您需要实现一些其他逻辑来判断用户是否已登录。

看看官方angular路由指南here .有很多有用的信息可以帮助您。尤其是这些:

• recommended guard implementation
• debugging routing in your application

编辑 2018/12/27

所以如果问题是如何在相同路径上有条件地加载两个功能模块，

答案是，根据我的经验，你不能。