如果您想要一种基于角色管理权限的简洁方法,我建议您使用ngx-permissions
npm i ngx-permissions
NgxPermissionsGuard 实现了 CanLoad 接口,可以这样使用
{
path: 'lazy',
data: {
permissions: {
only: 'SUPERVISOR',
}
},
canLoad: [NgxPermissionsGuard],
loadChildren: 'app/lazy-module/lazy-module.module#LazyModule'
},
如果您想授予对主管以外的其他内容的访问权限,您可以使用except
data: {
permissions: {
except: 'SUPERVISOR',
}
},
两种可能性也是可能的
data: {
permissions: {
only: ['ADMIN', 'MODERATOR'],
except: ['SUPERVISOR']
}
}
更多细节在这里
如果你不想使用 ngx-permission 你可以创建一个服务
@Injectable()
export class AuthGuardService implements CanLoad {
constructor(private router: Router) {}
canLoad(route: Route): boolean {
let url = route.path; //get url here, example menu1
// get permissions array here from a service or localstorage
if(permissions.indexOf(url) !== -1 ) { //means it exist
return true
}
return false;
}
}
并将其添加到您的 3 条路线中
{path: "menu1", loadChildren:'./main/menu.module#Menu1Module', canLoad:[AuthGuardService]}
...