Question

我刚开始接触Angular，并且一直在谷歌上搜索，但是还没有发现任何有用的东西（可能是我使用的Google术语）。

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

用角形，可以说您有角色角色角色ClientRole => / pages / 1，   / pages / 2 AdminRole => / pages / 1，/ pages / 2，/ pages / admin / 1，   / pages / admin / 2

对于路线，我想您会发送一个新的路线清单   每当用户身份验证更改为可观察/ ngrx存储时   更新路线列表（从而阻止某人通过   在“路由文件”中查看是否定义了“ / page / admin”路由，如果   他们没有扮演那条路线的角色）？

如何使用组件？这样，如果有人尝试   对客户端组件进行逆向工程，它们甚至没有   客户端上的“管理组件”，除非已登录   并担任管理员角色？

Answer 1

让您的jwt令牌包含level之类的东西，它们可以是“用户”或“管理员”。他们登录后，可以在isLoggedIn()服务中致电guard。

因此在您的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';
        }
    });
}

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

1 个答案: