Angular 6+中基于角色的重定向；

在我的Angular8应用程序中，用户和管理员有两个仪表板页面，我想通过使用用户角色将相应的仪表板加载到PanelComponent。我想在PanelComponent.html中使用

ngIf

，并根据角色加载相应的仪表板，但不确定这是否是一个好主意：（

---

另一方面，也有一些类似的问题，但没有一个很好的例子。那么，实现这种方法的最佳方法是什么呢？

为了支持基于角色的访问，角度路由防护是最佳做法。 但是，如果您只想支持两个页面的基于角色的访问，并且需求不会及时扩展，那么我认为使用ngIf没有任何问题。在这种情况下，我会这样做

如果仍要使用路由防护，则应相应地实现CanActivate接口。这将是路由防护的实现。此类负责根据角色显示或不显示请求的页面。如果用户没有所需的角色，则会重定向到您拥有的http 404或403页面特德

import { Injectable } from '@angular/core';
import { 
  Router,
  CanActivate,
  ActivatedRouteSnapshot
} from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class RouteGuardService implements CanActivate {
  constructor(public auth: AuthService, public router: Router) {
  }
  canActivate(route: ActivatedRouteSnapshot): boolean {
    if (
      !this.auth.isAuthorized(route.data.roleCode)
    ) {
      this.router.navigate(NotFoundPage.PATH);
      return false;
    }
    return true;
  }
}

您可以在app-routing.module中设置路由的角色组，如下所示

export const ROUTES: Routes = [
  { 
    path: 'admin',
    component: AdminDashBoardComponent,
    canActivate: [RouteGuardService],
    data: { 
      roleCode: 'admin'
    } 
  },
  { 
    path: 'user', 
    component: UserDashBoardComponent, 
    canActivate: [RouteGuardService],
    data: { 
      roleCode: 'user'
    } 
  },
  { 
    path: 'other', 
    component: OtherPageComponent, 
    canActivate: [RouteGuardService], 
    data: { 
      roleCode: 'user'
    } 
  },
  { path: '**', redirectTo: '' }
];

为了简洁起见，我没有共享身份验证服务。它所能做的只是比较user和route.data.roleCode的角色代码。 您还可以将身份验证逻辑集成到此RouteGuardService中。如果用户未登录，您可以将其重定向到loginpage

所有这些都是为了防止未经授权访问您的页面

您要求在登录后重定向到正确的页面，这听起来好像您想要一个动态主页。登录后立即根据角色组重定向不是一个好的做法

您可以在主页组件的ngOnInit中重定向。这提供了更好的设计

export class HomePageComponent {  
...
    ngOnInit() {
        if (this.auth.isAuthorized('admin')) {
          this.router.navigateByUrl('/admin');
        } else if (this.auth.isAuthorized('user')) {
        this.router.navigateByUrl('/user');
    } 
}

---

根据角色路径登录到所需页面后，

登录

。您也可以使用

守卫

来控制对路径的访问。你好，塔哈，谢谢回复。我看了教程，但由于我很困惑，还没有使用路径守卫，我无法获得关键部分。因此，您能帮我解决以下问题吗？使用路径守卫在我的场景中，我得到了用户的角色，然后根据他的角色重定向用户。但是不知道基于角色的路由器。知道吗？对不起，我没有很好地理解你的问题。我正在编辑相应的答案。对不起，我无法很好地解释。我只是想知道，在ro中ute guards，有没有一种方法可以通过获取用户角色（从数据库中）然后根据规则自动重定向它？我也查看了用户转发的方式，但没有看到用户是如何转发的。很快，我需要一个最新的示例，具有最小的实现。我使用Angular 8。谢谢并投票通过；）感谢您的支持：）是的，大多数教程都没有像您一样涵盖重定向要求。我更新了我的答案。事实上，真正的答案是在最后，但在此之前我不得不提到所有其他路线警卫的东西。非常感谢您的详细解释。我想我应该像你说的那样使用路障。现在我正在实现该服务。但我不确定在使用Route Guard方法时是否应该使用

HomePageComponent

的

ngOnInit（）

部分。我应该使用该部分还是检查您未发布的身份验证服务中的角色。除了你的回答之外，还有什么必要的部分吗？