У меня проблема с моим токеном-перехватчиком, и я не могу его найти, и должен сказать, что я новичок под углом.Я читал эту статью о том, как обновить токен jwt.
Это моя служба перехвата токенов:
import {Injectable, Injector} from '@angular/core';
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {AuthService} from './auth.service';
import {catchError, map, switchMap} from 'rxjs/operators';
import {Observable, throwError} from 'rxjs';
import {Router} from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {
constructor(private injector: Injector, private router: Router) {
}
inflightAuthRequest = null;
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.includes('login_check')) {
return next.handle(req);
}
const authService = this.injector.get(AuthService);
if (!this.inflightAuthRequest) {
this.inflightAuthRequest = authService.getToken();
}
return this.inflightAuthRequest.pipe(
map((token: string) => {
// unset request inflight
console.log('old token', this.inflightAuthRequest);
this.inflightAuthRequest = null;
console.log('unset inflighttoken');
// use the newly returned token
const authReq = req.clone({
headers: req.headers.set('token', token ? token : '')
});
return next.handle(authReq);
}),
catchError(error => {
console.log('we have an error');
// checks if a url is to an admin api or not
if (error.status === 401) {
// check if the response is from the token refresh end point
const isFromRefreshTokenEndpoint = !!error.body['message'];
if (isFromRefreshTokenEndpoint) {
localStorage.clear();
this.router.navigate(['/login']);
return throwError(error);
}
if (!this.inflightAuthRequest) {
this.inflightAuthRequest = authService.refreshToken();
if (!this.inflightAuthRequest) {
// remove existing tokens
localStorage.clear();
this.router.navigate(['/sign-page']);
return throwError(error);
}
}
return this.inflightAuthRequest.pipe(
switchMap((token: string) => {
// unset inflight request
this.inflightAuthRequest = null;
// clone the original request
const authReqRepeat = req.clone({
headers: req.headers.set('token', token)
});
// resend the request
return next.handle(authReqRepeat);
})
);
} else {
return throwError(error);
}
})
);
}
}
Метод перехвата проверяет ошибку 401 (когдасрок действия маркера истек), затем получите другой токен.Если пользователь отправляет другой запрос, когда токен еще не обновлен, запрос сначала ожидает ответ.Перехватчик использует службы getToken () и refreshToken ():
getToken(): Observable<string> {
const decoder = new JwtHelperService();
const token = localStorage.getItem('token');
const isTokenExpired = decoder.isTokenExpired(token);
if (!isTokenExpired) {
return of(token);
}
return this.refreshToken();
}
refreshToken(): Observable<string> {
const url = environment.apiUrl + 'api/token/refresh';
// append refresh token if you have one
const refreshToken = localStorage.getItem('refreshToken');
const expiredToken = localStorage.getItem('token');
const httprequest = this.http
.get(url, {
params: new HttpParams()
.set('refresh_token', refreshToken),
observe: 'response'
})
.pipe(
share(),
map(res => {
const token = res.headers.get('token');
const newRefreshToken = res.headers.get('refresh_token');
// store the new tokens
localStorage.setItem('refreshToken', newRefreshToken);
localStorage.setItem('token', token);
return token;
})
);
return httprequest;
}
И я обнаружил, что браузер не отправляет никаких запросов к бэкэнду, поэтому я думаю, что проблема заключается в запросах.