如何根据模块条件允许用户路由？

Question

我知道 Angular 中 Auth 守卫的用法，我只是 Angular 的初学者，我刚刚做了一个基于读写访问的基本身份验证，包括 isAdmin 或 Isguest 等角色

但现在我希望特定用户必须只能访问某些路线

就像我有三个模块

1. 一个组件
2. B 组件
3. C 组件

并且上述所有组件可能是子路由，也可能不是子路由。

我希望 harry 用户可以访问模块 A 和 B

Jackson 可以访问模块 B 和 C

Michel 只能访问模块 A

那么如何在 Angular 中构建这种类型的机制呢？

其实我知道 Auth 守卫，但是如何组织数据库中的数据以添加组件列表或其他内容等？

canActivate 中需要添加什么条件？

一个解决方案，如果明天有新组件出现并且我需要访问授权，我需要处理的更少并且是动态的。

欢迎任何好的想法...！！

Answer 1

您可以为每个路由添加权限并存储每个用户所需的权限。

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    canActivate: [ Guard ],
    data: { permission: 'view dashboard' }
  }

在 canActivate() 中，您可以检查权限是否存在于用户数据中。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if(!route.data || (route.data && this.user.permissions.find(route.data.permission))) {
    return true;
  }
}

Answer 2

您需要创建一个 Auth Guard，如下所示：

@Injectable()
    export class MyGuard implements CanActivate {
      constructor(private _myUserService: MyUserService) {}
    
      canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if(//ADD CONDITION HERE)
            return true;
        return false;
      }
    }

然后在你的路线中，你会得到类似的东西：

{
    path: 'XXX',
    component: XXXComponent,
    canActivate: [MyGuard],
}