Estoy escribiendo una aplicación con angular en el frente + asp.net en el backend. Tengo 2 roles: usuario y administrador. Hay algunos botones en mi barra de navegación que quiero ocultar del rol de usuario. Mi función para verificar si el rol de usuario registrado actualmente es administrador:

 public isUserAdmin = (): boolean => { var token = localStorage.getItem("token"); const decodedToken = this._jwtHelper.decodeToken(token!); const role = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'] return role === 'Admin'; }

El código anterior está probado y funciona, actualmente lo estoy usando para guardia.

Mi barra de navegación html:

 <li class="nav-item"> <a class="nav-link" *ngIf="isUserAdmin" routerLink="manufacturers">Manufacturers</a> </li>

barra de navegación.ts:

 export class HeaderComponent implements OnInit { public isUserAdmin: boolean = false; ... constructor(private userService: UserService, private _router: Router) { this.userService.adminChanged .subscribe(res => this.isUserAdmin = res); }

Para obtener el trabajo de código anterior de navbar.ts, modifiqué userService:

 export class UserService { private _adminChangeSub = new ReplaySubject<boolean>(1); public adminChanged = this._adminChangeSub.asObservable(); constructor(private _http: HttpClient, private _envUrl: EnvironmentUrlService, private _jwtHelper: JwtHelperService) { } public isUserAdmin = (): boolean => { var token = localStorage.getItem("token"); const decodedToken = this._jwtHelper.decodeToken(token!); const role = decodedToken['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'] this._adminChangeSub.next(true); return role === 'Admin'; }

Pero simplemente no funciona. El elemento en la barra de navegación todavía está aquí incluso si inicio sesión en la cuenta de administrador. Además, cuando trato de console.log (this.isUserAdmin) en el constructor justo después de suscribirlo, devuelve falso. ¿Cómo puedo ocultar botones de la barra de navegación cuando el usuario no es administrador?