相同的 URL 路径，但根据用户角色加载不同的组件 - Angular

Posted 2023-02-23

【中文标题】相同的 URL 路径，但根据用户角色加载不同的组件 - Angular

【英文标题】：Same URL path but loading different components based on User role - Angular

【发布时间】：2019-08-17 07:51:14

【问题描述】：

我希望有 2 个组件具有相同的路由（根“/”），但根据用户的角色（访客或已验证）仅加载一个。因此，Guest 的主页和 Authenticated 的主页具有相同的路径。

我尝试为访客创建一个守卫，为经过身份验证的用户创建一个守卫，并在 Routes 数组中的组件中应用每个守卫，如下所示：

export const AppRoutes: Routes = [
    
        path: '',
        component: GuestLayoutComponent,
        canActivate: [GuestGuard],
        children: [
            
                path: '',
                loadChildren: './guest-components/guest.module#GuestModule',
            
        ],
    ,
    
        path: '',
        component: AuthLayoutComponent,
        canActivate: [AuthGuard],
        children: [
            
                path: '',
                loadChildren: './auth-components/auth.module#AuthModule',
            
        ],
    ,
    
        path: '**',
        component: ErrComponent,
    ,
];

但它创建了一个无限循环。

也分享：

GuestRoutes：

export const GuestRoutes: Routes = [
    
        path: '',
        children: [
        
            path: '',
            component: GuestHomeComponent,
        , 
            path: 'about-guest',
            component: GuestAboutComponent,
            pathMatch: 'full'
        ,
        ]
    
];

AuthRoutes：

export const AuthRoutes: Routes = [
    
        path: '',
        children: [
        
            path: '',
            component: AuthHomeComponent,
        , 
            path: 'about',
            component: AuthAboutComponent,
            pathMatch: 'full'
        ,
        ]
    

AuthGuard：

export class AuthGuard implements CanActivate 
constructor(private authService: AuthService, private router: Router) 

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean 
        return this.authService.isAuthenticated()
        .then(
            (authenticated: boolean) => 
            if (authenticated) 
                return true;
             else 
                this.router.navigate(['/']);
                return false;
            
            
        );
    

GuestGuard：

export class GuestGuard implements CanActivate 
constructor(private authService: AuthService, private router: Router) 

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean 
        return this.authService.isAuthenticated()
        .then(
            (authenticated: boolean) => 
            if (authenticated) 
                this.router.navigate(['/']);
                return false;
             else 
                return true;
            
            
        );
    

请查找link to the demo。

我怎样才能做到这一点？我将不胜感激。

【参考方案1】：

我认为不可能有 2 个组件具有完全相同的路线。我不记得以前见过解决方案。

我不知道您为什么要完成此操作，但希望以下方法可以帮助您。创建一个名为 ContainerHomeComponent 的父组件，您将其指向您的路线。在 .ts 文件中，您查询“this.authService.isAuthenticated()”以查找用户是否经过身份验证并分配给名为“authenticated”的属性。在模板中你只有：

<app-guest-home-component *ngIf="!authenticated"></app-guest-home-component>

<app-auth-home-component *ngIf="authenticated"></app-auth-home-component>

【讨论】：

这样做的原因是将经过身份验证的用户发送到他/她的仪表板，并将访客用户发送到登录页面。类似于具有这种架构的网站，例如脸书、推特

那么我认为这种方法可以解决您的问题。刚刚意识到这种方法不会让您延迟加载 AuthModule 和 GuestModule，所以这将是一个缺点。