0

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

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

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

对于路线，我猜您只要用户 auth 更改以更新路线列表（从而防止某人通过“路线文件”查看是否有“ /page/admin" 路由是否已定义（如果他们不在具有该路由的角色中）？

这如何与组件一起使用？因此，如果有人试图对客户端组件进行逆向工程，他们甚至不会在客户端拥有“管理组件”，除非他们已登录并处于管理员角色？

4

1 回答 1

0

让您的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';
        }
    });
}
于 2018-09-19T13:24:56.880 回答