在Angular中，是否可以根据用户是否通过身份验证来加载不同的模块？

Question

例如，URL：如果用户通过身份验证，www.example.com 应该加载一个模块，否则应该加载另一个模块。

我尝试过使用守卫，但它没有像我预期的那样工作。

我是 Angular 的新手。如果有人可以编写示例路由数组进行演示，我们将不胜感激。 :)

如果用户未通过身份验证，我希望我的路由像下面这样工作：

  {
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  },
  {
    path: 'register',
    loadChildren: './register/register.module#RegisterModule'
  }

否则，如果用户通过了身份验证，我希望我的路由像下面这样工作：

  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/dashboard'
  },
  {
    path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule'
  },
  {
    path: 'profile',
    loadChildren: './user-profile/user-profile.module#UserProfileModule'
  }

Answer 1

是的，您可以使用 CanActivate 守卫（检查路由访问）来实现。

CanActivate 检查用户是否可以访问路线。

话虽如此，我希望您在 guardCheck 后重定向到另一条路线。

您的路由器配置不应在同一路由上容纳两个不同的组件或模块。您可以将它们添加为一条路线的子路线，并在您需要它们在同一路线上时决定路线。

更新:

我遇到了 matcher 的概念，它可用于在同一路径加载两个不同的路由：

const routes: Routes = [{
  path: 'list',
  matcher: matcherForAuthenticatedRoute,
  loadChildren: './user/register#RegisterModule'
},
{
  path: 'list',
  matcher: matcherForTheOtherRoute,
  loadChildren: './user/home#HomeModule'
}]

现在我们的匹配逻辑依赖于两个函数，如下所示：

export function matcherForAuthenticatedRoute(
 segments: UrlSegment[],
 group: UrlSegmentGroup,
 route: Route) {
  const userService =  appInjector.get(MyService);
  const isPathMatch = segments[0].path === route.path;
  const isUserAuthenticated = userService.isUserAuthenticated('userId');      
  if(isPathMatch && isUserTypeMatch) { 
    return {consumed: [segments[0]]};
  } else {
    return null;
  }
}

我们可以在引导应用程序后定义appInjector并导出它以供使用：

appInjector = componentRef.injector;

在Angular中，是否可以根据用户是否通过身份验证来加载不同的模块？

In Angular, is it possible to load different modules depending upon whether the user is authenticated or not?

angular

angular-router-guards

angular-router

angular-route-guards