Как приостановить http запросы до получения и записи токена в localalstorage? - PullRequest
Новая
       18

Как приостановить http запросы до получения и записи токена в localalstorage?

0 голосов
/ 08 мая 2019

делаю авторизацию в угловом приложении. Я получаю код через OAuth и отправляю его бэкэнду. Бэкенд возвращает мне токен. Но пока я жду получения и записи токена, несколько запросов BASE (например, счетчик меню) возвращают 401 ошибку. Как сохранить все запросы и отправить их после записи токена в память?

Угловой 7.2.0 

public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const currentToken = localStorage.getItem('accessToken');
    if (currentToken) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentToken}`
        }
      })
    }
    return next.handle((request));
  }

Я хочу запрашивать данные только после получения токена, теперь мне нужно обновить страницу, чтобы повторно запросить все данные

Ответы [ 2 ]

0 голосов
/ 08 мая 2019

В вашем сервисе, где вы получаете токен, вы можете создать тему, которая будет излучаться при установке токена. 

export class AccessTokenService {
  private readonly accessToken = new Subject<string>();
  readonly accessToken$ = accessToken.asObservable();

  constructor() {
    // your logic to get token:
    this.getTokenFromSomewhere().subscribe(() => {
      const token = localStorage.setItem('accessToken');
      this.accessToken.next(token);
    });
  }
}

export class CustomHttpInterceptor implements HttpInterceptor {
  constructor(readonly at: AccessTokenService) {}

  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.at.accessToken$.pipe(
      mergeMap((token) => {
        const request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });

        return next.handle(request);
      })
    );
  }
}

Вы также можете использовать APP_INITIALIZER, чтобы установить элемент localStorage раньше всего остального.загружен.Но это зависит от вашего варианта использования, если это полезно сейчас

0 голосов
/ 08 мая 2019

Все http-запросы носят асинхронный характер. Так что вы должны выполнять вызовы для меню внутри метода подписки внутреннего вызова для токена. Все последующие звонки также могут быть сделаны внутри него.

...