基於角度角色保護的客戶端問題保護

Question

我剛接觸angular，並一直在谷歌上搜索，但是並沒有真正找到任何幫助（可能是我使用的Google術語）。

在傳統的服務器端應用程序中，您可以基於身份驗證的用戶生成一個頁面，該頁面具有不同的控件/功能/布局/等。 因為這都是在服務器端完成的，所以兩個不同的用戶（他們看到兩個不同的東西）不知道另一個用戶可能會看到什么。 由於都是服務器端，因此無法運行提琴手或其他工具來提取所有typescript / javascript / html / etc。

用角表示，假設您具有角色的路由ClientRole => / pages / 1，/ pages / 2 AdminRole => / pages / 1，/ pages / 2，/ pages / admin / 1，/ pages / admin / 2

對於路由，我猜想您會在用戶身份更改時隨時通過observable / 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';
        }
    });
}