基于角度角色的保护，防止客户端问题

Question

我是 angular 的新手，一直在谷歌上搜索这个，但并没有真正找到任何有用的东西(可能是我正在使用的谷歌术语(。

在传统的服务器端应用程序中，您可以根据经过身份验证的用户生成具有不同控件/功能/布局/等的页面。因为这一切都是在服务器端完成的，所以两个不同的用户(他们看到两个不同的东西(不知道另一个用户可能会看到什么。由于它都是服务器端，因此无法运行fiddler或其他工具来提取所有打字稿/javascript/html/等。

在角度中，假设您有角色的路由 客户端角色 =>/pages/1，/pages/2 AdminRole =>/pages/1，/pages/2，/pages/admin/1，/页面/管理员/2

对于路线，我猜您只会发送一个新的路线列表 通过可观察/NGRX 存储，只要用户身份验证更改为 更新路由列表(从而防止某人通过 "路由文件"以查看是否定义了"/page/admin"路由，如果 他们不是有这条路的角色(？

这如何与组件一起使用？这样如果有人试图 对客户端组件进行逆向工程，他们甚至不会有 客户端上的"管理组件"，除非它们已登录 并担任管理员角色？

Answer 1

让你的jwt令牌包含类似level的东西，可以是"用户"或"管理员"。登录后，您可以在guard服务中呼叫isLoggedIn()。

所以在你的auth.service.ts：

private isLoggedInAs = new BehaviorSubject<any>('');
isLoggedIn = this.isLoggedInAs.asObservable();
// check if user is logged in, and if so with what level
public isLoggedIn() {
// insert relevant filters that will return false
const jwtpayload = jwt.decode(this.getToken());
this.updateLoggedIn(jwtpayload.level);
return true;
}
updateLoggedIn(level: string) {
this.isLoggedInSource.next(level);
}

在你的guard.service.ts：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.authService.isLoggedIn()) {
this.router.navigate(['/pages']);
return false;
} else {
return true;
}
}

无论您在哪里需要知道他们的水平，您都可以执行以下操作：

ngOnInit() {
this.authService.isLoggedIn.subscribe(isLoggedIn => {
if (isLoggedIn) {
this.isLoggedIn = isLoggedIn;
} else {
this.isLoggedIn = 'anonymous';
}
});
}