Angular ngIf с asyn c данные отображаются корректно только при обновлении

Question

Здравствуйте, это мой весенний загрузочный код для получения информации о пользователе.

@GetMapping("/getUserInfo")
public User getUserInfo(@RequestHeader(value="token") String token)  {
    User user = userRepository.findByEmail(jwtUtil.extractUsername(token));
    return user;
}

Это код для получения его в angular

  public getUserInfo(token): Observable<User>{
    const headers = new HttpHeaders().set('token', token);
    return this.http.get<User>('http://localhost:8081/getUserInfo', {headers, responseType: 'json'});
  }

Это мой компонент навигации

user: User;
  constructor(public jwtClientService: JwtClientService,private zone:NgZone) {
  }
  ngOnInit(): void {
    this.ress();
  }
  ress(){
    this.jwtClientService.getUserInfo(sessionStorage.getItem('token'))
      .subscribe(recent => {
         this.user=recent;
      });
}

и просмотр

<li *ngIf="jwtClientService.isUserLoggedIn()===true && user?.roles.includes('ADMIN')"  class="nav-item" routerLinkActive="active">
    <a [routerLink]="['admin/users']" class="nav-link" routerLink="/admin/users" >Users</a>
  </li>

но как только я пытаюсь использовать подписку, обещание, канал, все это работает только со второй попытки, я знаю, что это является причиной асин c, но я некоторые ссылки должны отображаться в nav только для пользователей-администраторов, таких как эта в навигации (они не отображаются после подписки, а только после обновления страницы)

Возможно ли это?

Answer 1

Я бы предложил использовать Route Guard .

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(userService: UserService) { }
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Promise<boolean> | boolean {
    return new Promise((resolve, reject) => {
      // Grab your user details here
      userService.authUser().toPromise().then((user) => {
      userService.user$.next(user)
      resolve(true)
      }).catch((err) => { reject(err) })
    })
  }
}

  user$: BehaviorSubject<User> = new BehaviorSubject<User>(null)

и затем в вашем навигационном компоненте взять наблюдаемое значение пользователя ( user $ из пользовательской службы)

export class NavigationComponent {
constructor(private userService: UserService){
console.log('proper concurrency', userService.user$.value)
}

и просто добавьте охрану маршрута в свои маршруты, например:

      {
        path: 'navigation',
        component: NavigationComponent,
        canActivate: [AuthGuard]
      },

и на ваш взгляд

<li *ngIf="userService.user$.value.isUserLoggedIn()===true && userService.user$.value?.roles.includes('ADMIN')" class="nav-item" routerLinkActive="active">
    <a [routerLink]="['admin/users']" class="nav-link" routerLink="/admin/users" >Users</a>
  </li>