Question

在我的Angular8应用程序中，有2个仪表板页面分别用于User和Admin，我想通过将用户角色用作PanelComponent来加载相应的仪表板。我认为可以在PanelComponent.html中使用ngIf并根据角色加载相应的仪表板，但是不确定这是否是一个好主意:(

另一方面，与此类似的还有一些问题，例如How to achieve Role Based redirection after login in Angular-5?，但没有一个很好的例子。那么，实现此方法的最佳方法是什么？

Answer 1

Angular Route Guards是支持基于角色的访问的最佳实践。但是，如果您只希望支持基于角色的访问权限只有两个页面，并且要求不会及时扩展，那么使用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: '' }
];

为了简洁起见，我没有共享身份验证服务，它只能将用户的roleCode与route.data.roleCode进行比较。如果用户未登录，还可以将身份验证逻辑集成到此RouteGuardService中，您可以将其再次重定向到登录页面。

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

关于登录后重定向到正确页面的要求，听起来像是需要动态主页。登录后立即根据角色组进行重定向不是一个好习惯。

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

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

Angular 6 +

1 个答案: