Показывать модальный логин для неавторизованного отклика 7

Question

Мне нужно показывать модальное имя входа каждый раз, когда сервер возвращает http неавторизованный статус (401), и в этом случае остановите загрузку страницы ... например, я вошел в систему, но пытаюсь получить доступ к защищенному ресурсуэто могут сделать только пользователи с правами администратора .. поэтому в этом случае я бы хотел показать пользователю модальное имя с логином и паролем.Это может быть, например, переход к защищенному маршруту или событие удаления.

Я пытался сделать это в ApiInterceptor:

@Injectable({providedIn: 'root'})
export class ApiInterceptor implements HttpInterceptor {

  constructor(
    ...
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    req = req.clone({ url: environment.baseUrl + req.url });

    if (this.authService.validToken) {
      req = req.clone({ headers: req.headers.set('Authorization', `Bearer ${this.authService.validToken}`) });
    }

    if (!req.headers.has('Content-Type')) {
      req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
    }

    return next.handle(req).pipe(catchError(resp => this.handleError(resp)));

  }

  private handleError(httpError: HttpErrorResponse) {
      if (httpError.status === this.UNAUTHORIZED) {
        // opening login modal here, but can't stop the request to prevent user to se unauthorized data, and after login, how can I redirect user to the same resource he tried to access?
      }
      return throwError(httpError);
  }

}

Нужна помощь здесь, если у кого-то есть идея вкак это сделать будет оценено!

Answer 1

Ваш ApiInterceptor выглядит так, как будто он добавляет токен на предъявителя к запросу. Я бы назвал это TokenInterceptor или аналогичным, и создал бы новый для обработки неавторизованных запросов.

Я бы создал новый перехватчик и назвал бы это UnauthorisedRequestInterceptor. Нечто похожее на это:

@Injectable({ providedIn: 'root' })
export class UnauthorisedRequestInterceptor implements HttpInterceptor {

    constructor(private router: Router) { }

    intercept(
        req: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
            map(event => {
                return event;
            }),
            catchError((error: HttpErrorResponse) => {
                if (error.status === 401) {
                    this.router.navigate(['/auth/login']);
                }
                return throwError(error);
            })
        );
    }
}

Это будет перехватывать каждый http-запрос, и если возвращенный статус 401, он перенаправит вас на вашу страницу входа в систему.

Затем добавьте это в список поставщиков в app.module.ts:

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UnauthorisedRequestInterceptor,
      multi: true
    }
  ]

Что касается перенаправления пользователей на доступ к защищенному маршруту, это должно быть сделано в вашей аутентификации.

Answer 2

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

Если вы хотите перенаправить пользователя после 401, вам нужно внедрить службу Router в ваш перехватчик и использовать функцию navigate (cf this.router.navigate(['/myRoute']);)