Срок действия токена JWT в угловых 6

Question

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

Вот мой автор:

Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router,private authService:AuthService ){ }

  canActivate(

    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (!(this.authService.isTokenExpired()) ){
      // logged in so return true
      console.log("Logged IN");
      return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return true;
  }
}

Вот мой сервис авторизации:

 const helper = new JwtHelperService();

    @Injectable({
      providedIn: 'root'
    })
    export class AuthService {

      constructor(private http: HttpClient) { }

    /*  public login<T>(username: string, password: string): Observable<HttpResponse<T>> {
        let headers = new HttpHeaders();
 const clientId = 'rosClient';
    const secret = 'secret';
        headers = headers.append("Authorization", "Basic " + btoa(`${username}:${password}`));
        headers = headers.append("Content-Type", "application/x-www-form-urlencoded");
        return this.http.get<T>('/auth/login', {
          headers: headers,
          observe: 'response'
        });
      }*/


      public login<T>(username: string, password: string): Observable<HttpResponse<T>> {
        let headers = new HttpHeaders();
        const clientId = 'clientid';
        const secret = 'secret';
        headers = headers.append('Authorization', 'Basic ' + btoa(`${clientId}:${secret}`));
        headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
        const params = new HttpParams().set('username', username).set('password', password).set('grant_type', 'password').set('scope', 'read');
        return this.http.post<T>('/oauth/token', params.toString(), {
          headers,
          observe: 'response'
        });
      }

      public logout<T>() {
        this.http.post('/oauth/revoke_token', '', {}).subscribe();
      }

      getToken(): string {
        return localStorage.getItem(TOKEN_NAME);
      }



      isTokenExpired(token?: string): boolean {
        if(!token) token = this.getToken();
        if(!token) return true;

        const date = helper.getTokenExpirationDate(token);
        console.log(date);
        if(date === undefined) return false;
        return !(date.valueOf() > new Date().valueOf());
      }
    }

Ниже мой перехватчик ошибок:

@Injectable()
export class H401Interceptor implements HttpInterceptor {

    constructor(private authService: AuthService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if (err.status === 401) {
                // auto logout if 401 response returned from api
                // this.authService.logout();
                // location.reload(true);
                localStorage.removeItem('currentUser');
            }

            const error = err.error.message || err.statusText;
            return throwError(error);
        }));
    }
}

Answer 1

Вы можете использовать HttpInterceptor, когда бэкэнд отвечает '401 Unauthorized', вы удаляете токен и переходите на страницу входа.Вот рабочий код:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.storageService.retrieve(tokenKey)}`,
        'Content-Type': 'application/json'
      }
    });
    return next.handle(request).pipe(
      catchError(
        (err, caught) => {
          if (err.status === 401){
            this.handleAuthError();
            return of(err);
          }
          throw err;
        }
      )
    );
  }
  private handleAuthError() {
    this.storageService.delete(tokenKey);
    this.router.navigateByUrl('signIn');
  }