0

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

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

就像我有三个模块

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

以上所有组件可能是子路由，也可能不是子路由。

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

Jackson 可以访问模块 B 和 C

Michel 只能访问模块 A

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

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

我必须在 canActivate 中添加什么条件？

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

欢迎任何伟大的想法......！

4

2 回答 2

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;
  }
}
于 2020-07-31T16:24:15.820 回答
1

您需要创建一个 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],
}
于 2020-07-31T15:40:09.637 回答