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

用户7366809

例如,如果用户通过身份验证,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'
  }
飞艇

是的,您可以使用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;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

是否可以在Angular 8中预加载延迟加载的模块?

Angular 2(4/5)检查用户是否经过身份验证,最佳做法

Angular Firebase身份验证,如何检查用户是否已登录以隐藏导航链接?

您如何确定用户是否已在Angular Firebase中进行身份验证?

在Angular2中加载Appcomponent之前的用户身份验证

是否可以根据用户是否已通过身份验证在MVC控制器中更改路由?

Angular Firebase ng如果用户通过了身份验证,则侦听器无法在页面重新加载时工作

使用angular从Firebase身份验证中删除用户

确保在Angular中对用户进行身份验证

检查用户是否在Android的Firebase Google身份验证中首次通过身份验证

Angular 2中的身份验证流程

Angular-Auth Guard阻止授权用户通过直接URL访问身份验证页面

Angular JS和SpringBoot,通过身份验证后获取用户

如果用户已通过身份验证,则使用 express 为 Angular 应用程序提供服务

如何通过 Angular 2+ / NodeJS API 对用户进行身份验证

Angular 5身份验证

DocuSign:可以检测当前通过身份验证的用户是否无法通过REST API查看信封

删除用户身份验证的Firebase angular 5

Angular 2身份验证:注销停留在用户页面中

将文档作为 Angular 上的经过身份验证的用户存储在 Firestore 中

在Angular中处理两种类型的用户身份验证

Django Rest Framework + Angular.js Web应用程序中的用户身份验证

在Laravel 5.1和Angular JS(JWT身份验证)中记住用户并忘记密码功能

无法读取Angular和Firebase身份验证中未定义的属性“用户”

我可以只查看用户是否通过 Microsoft 身份验证而不将凭据信息保存在 Cookies 中

是否可以通过2种不同的身份验证方案在SSH上打开2个端口?

Firebase跟踪用户是否已通过身份验证

检测用户是否已通过身份验证

检查用户今天是否已通过身份验证