Angular 17 — HttpInterceptorFn — очередь HTTP-запросов, пока служба обновления токенов не завершена
В проекте Angular 17 с HttpInterceptorFn я столкнулся с проблемой при обновлении токена аутентификации. Действительно, когда приходят два запроса, в то время как у них есть токен с истекшим сроком действия, затем запускаются два запроса на продление. Проблема заключается в том, что второй не удастся, потому что токен обновления был изменен вторым. Итак, у меня есть идея создать линию ожидания, которая будет принимать запросы, поступающие во время текущего обновления токена. Но я не вижу, как тогда управлять исполнением запросов, содержащихся в очереди ожидания. Есть ли у вас идеи, как я мог бы справиться с этим делом? Спасибо !
В проекте Angular 17 с HttpInterceptorFn я хочу поместить HTTP-запросы в очереди ожидания, пока выполняется запрос на обновление токена, а затем выполнить запросы в очереди ожидания.
Ответы 1
Вы должны сохранять состояние запроса обновления токена в ожидании, например, используя тему, которая будет выдаваться после завершения обновления, а затем для любого следующего запроса, когда вы поймаете 401 и увидите, что субъект существует (что означает, что обновление ожидает), а затем просто дождитесь его и повторите попытку после завершенный:
let refreshingToken$: Subject<void> | null = null;
export const refreshTokenInterceptor: HttpInterceptorFn = (
req: HttpRequest<unknown>,
next: HttpHandlerFn
) => {
const http = inject(HttpClient);
return next(req).pipe(
catchError((err) => {
if (err.status === 401) {
if (!refreshingToken$) {
refreshingToken$ = new Subject<void>();
http.get('/refresh').subscribe(() => {
refreshingToken$!.next();
refreshingToken$!.complete();
refreshingToken$ = null;
});
}
return refreshingToken$.pipe(switchMap(() => next(req)));
}
throw err;
})
);
};