Question

有没有办法在angular中实现基于角色的路由？

我什么都没尝试，因为我不知道从哪里开始。

我有两个组成部分LandingPageComponent和AdminPageComponent。我有基本的路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LandingPageComponent } from './pages/landing-page/landing-page.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/home'
  },
  {
    path: 'home',
    component: LandingPageComponent
  },
  {
    path: 'admin',
    component: AdminPageComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我还实现了基于JWT的授权，并且一切正常。但是我的问题是我不知道如何实现基于角色的路由：

例如，我有两个角色client和admin。因此，当client访问localhost:5000/时，我希望路由模块返回LandingPageComponent，但是当admin访问相同的路由时，路由模块应该返回AdminPageComponent。

所以我的问题是在角度上是否有可能实现这种路由模块？

Answer 1

您可以为路径添加防护：

  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/home',
    canActivate: [RoleGuard]
  }

在RoleGuard中，您可以实现canActivate方法，该方法将检查用户角色并导航到正确的路径。

Answer 2

是的。就像身份验证防护人员一样，您可以拥有角色防护人员。看起来像这样：

@Injectable()
export class AdminGuard implements CanActivate  {
  constructor(private router: Router) { }

  canActivate() : boolean {
    let user = localStorage.getItem(role);

    if(user !== 'admin') {
      this.router.navigate(['/user']);
    } else {
      return true;
    }
  }
}

在您的路由器中：

{ path: '', canActivate: [AuthGuard, AdminGuard], redirectTo: 'Day', pathMatch: 'full' }

基于角色的角路由

2 个答案: