Блог

Я использую следующий код для перенаправления пользователя на страницу входа в систему, если ответ от сервера имеет статус 401 или 403.

 return this.http
        .request(this.method, this.prepareUrl(url), options)
        .pipe(
            catchError((error: HttpErrorResponse) => {
                if ([401, 403].includes(error.status)) {
                   this.router.navigate(['/login']);
                }
                const err: Errors = {
                    error: error,
                    formError: error.error.data.validation ? error.error.data.validation : null
                };

                return Observable.throw(err);
            })
        );
  

Это работает нормально. Но при использовании с модальными всплывающими окнами и если срок действия токена истек, отображается переход на страницу входа, но модальный параметр все еще там. Как я могу предотвратить это и закрыть модальность, если статус ответа равен 401? Я использую модальности ngBootstrap.

Или это хорошая практика, чтобы запретить пользователю открывать modal, если токен недействителен? Если да, то как я могу проверить это из центрального места, поскольку у меня есть несколько модальностей

Вы можете использовать этот метод NgbModal.dismissAll(reason)

 export MyComponent {
   constructor(protected ngbModal:NgbModal){}

   public myMethod() {
      return this.http
        .request(this.method, this.prepareUrl(url), options)
        .pipe(
            catchError((error: HttpErrorResponse) => {
                if ([401, 403].includes(error.status)) {
                   this.ngbModal.dismissAll('Unauthorized');
                   this.router.navigate(['/login']);
                }
                const err: Errors = {
                    error: error,
                    formError: error.error.data.validation ? error.error.data.validation : null
                };

                return Observable.throw(err);
            })
        );
   }
}
  

Было бы неплохо использовать Http interceptor для обработки ответов глобально.

Учитывая, является ли это хорошей практикой. Было бы неплохо для пользователя восстановить состояние приложения (значения в полях формы, текущие открытые модальности, состояние аккордеона и т.д.) После аутентификации. С перенаправлениями это довольно сложно. Модальная форма с аутентификацией могла бы быть более простым в реализации решением.

Это во многом зависит от концепции вашего приложения.