来自客户端问题的基于角度角色的保护

Question

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

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

在 Angular 中，假设您有角色 ClientRole => /pages/1 的路由， /pages/2 AdminRole => /pages/1, /pages/2, /pages/admin/1, /pages/admin/2

对于路线，我猜你只会发送一个新的路线列表 用户身份验证更改为 更新路线列表（从而防止某人通过 “路由文件”查看是否定义了“/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';
        }
    });
}