时间戳

首页 > 解决方案 > 无限循环 en 获取 isAdmin 方法

angular - 无限循环 en 获取 isAdmin 方法

问题描述

我正在尝试添加仅具有 ADMIN 角色的用户可见的部分。

在我的数据库中，这种情况下的 role_Id 是 3。

在html页面上我放了这个：

<li class="nav-item">
  <a class="nav-link nav " *ngIf="this.authService.isAdmin" routerLink="/admin"
    routerLinkActive="active">Admin</a>
</li>
<li class="nav-item">
  <a class="nav-link nav " *ngIf="!this.authService.isLoggedIn" routerLink="/register"
    routerLinkActive="active">Créer un compte</a>
</li>

这似乎工作正常。问题是我在后端得到了一个无限循环，试图让用户使应用程序成为拐杖。

这是我编写方法的方式：

//imports here
export class AuthService {
    isLoggedIn = false;
    role: number;
    constructor(private http: HttpClient) { }

    login(data: any): Observable<any> {
        return this.http
            .post<any>(apiUrl + 'login', data, { observe: 'response' })
            .pipe(
                tap((_) => (this.isLoggedIn = true)),
                catchError(this.handleError('login', []))
            );
    }

    //other methods here
    getCurrentUser(): Observable<any> {
        const token = localStorage.getItem('token');
        const decoded = jwt_decode(token);
        const username = decoded.sub;
        return this.http.get<any>(apiUrl + 'users/' + username);
    }
    get isAdmin() {
        if (this.isLoggedIn) {
            this.getCurrentUser().subscribe(res => {
                this.role = res.role;
            })
                , (err) => {
                console.log(err);
            }
        }
        return this.role === 3;
    }
}

我怎么能阻止它？

标签： angular

解决方案

刚刚找到了我的问题的解决方案，我把这个方法从 authService 移到了头组件 TS 中。我在构造函数中获得了角色。对于 get isAdmin() 我只是返回。

constructor(protected authService: AuthService) {
  this.authService.getCurrentUser().subscribe(res => {
    this.role = res.role;
  })
}

ngOnInit() {}

get isAdmin() {
  return this.role === 3;
}

推荐阅读