Невозможно получить новейший токен до загрузки компонента в angular

Мне нужны соответствующие предложения для удовлетворения моей потребности, а именно:

Я реализовал систему аутентификации на основе jwt в своем угловом приложении. Когда я получаю свой новый токен и токен обновления, я создаю setTimeout, чтобы токен можно было обновить до истечения срока его действия. Но я также намеренно обновляю свой токен при загрузке приложения (в моем AppComponent), и моя проблема связана с этим случаем.

Я получаю информацию о вошедшем в систему пользователе из jwt, и проблема в том, что когда приложение загружается и выполняется обновление токена, токены сохраняются после отображения компонента, что приводит к тому, что приложение получает информацию о пользователях. предыдущий токен, а не вновь созданный.

Мы могли бы подумать об использовании преобразователей, но проблема в том, что при использовании преобразователя у меня будут запускаться два запроса токена обновления: один в моем AppComponent и один внутри преобразователя, а это не то поведение, которое мне нужно.

Итак, вот часть моего AppComponent:

     ngOnInit() {
        this.refreshToken();
        ...
      }
    
    private refreshToken() {
        this.authSvc.refreshToken().pipe(
          untilDestroyed(this),
          catchError(error => {
            if (error.status === 401) {
              this.router.navigate(['/login']);
            }
            return of();
          })
        ).subscribe();
      }

Вот часть AuthService:

    get user(): User | null {
      const token = localStorage.getItem('token');
      return token ? this.jwtHelper.decodeToken(token) : null;
    }

    refreshToken(): Observable<LoginResponse> {
        return this.http.post<LoginResponse>(
          `${environment.apiUrl}/token/refresh`,
          {refresh_token: localStorage.getItem('refresh_token')}, this.CONTEXT
        ).pipe(
          tap((res: LoginResponse) => this.storeTokens(res as LoginSuccess))
        );
      }
    
    storeTokens(data: LoginSuccess): void {
        localStorage.setItem('token', data.token);
        localStorage.setItem('refresh_token', data.refresh_token);
        this.scheduleTokenRefresh(data.token);
      }

А вот компонент, для которого мне нужны пользовательские данные (это будет не единственный компонент, которому эти данные потребуются):

export class HomeComponent implements OnInit {
  user!: User | null;
  constructor(private authSvc: AuthService) {
  }

  ngOnInit() {
    this.user = this.authSvc.user;
  }

Проблема, с которой я столкнулся, заключается в том, что компонент Home отображается до вызова storeTokens, поэтому, если пользовательские данные были обновлены на внутренней стороне с момента последнего токена, мой HomeComponent не узнает об этом, потому что он будет использовать предыдущий токен. ..

Я попробовал использовать ошибку распознавателя, она заставляет меня снова вызывать RefreshToken, но это не то, что я хочу. Мне нужно сохранить мойrefreToken внутри AppComponent и не вызывать его дважды. Вот преобразователь:

export const tokenRefreshedResolver: ResolveFn<boolean> = (route, state) => {
  return inject(AuthService).refreshToken().pipe(
    map(() => true),
    catchError(() => of(false))
  );
};

Каким будет подходящее решение?