Tengo token de acceso y token de actualización para una API. Un usuario puede tener diferentes tokens de actualización para diferentes API, y no sé cómo administrar el token de acceso cuando vence el token de acceso.
Por ahora lo resuelvo así, pero parece que es una solución compleja porque tengo que agregarlo a todas las funciones y cuando expira el token de actualización, no puedo manejarlo. La función updateAccessToken envía una solicitud al punto final, obtiene un nuevo token de acceso y lo actualiza en el sistema de gestión de estado.
getAllBuckets(account: GetAllBucket){ const {project, accessToken} = account const qs = new URLSearchParams({project}) return this.http.get(`${this.urlGoogleStorage}?${qs.toString()}`, { headers: {Authorization: `Bearer ${accessToken}`}}).pipe( catchError((error) => { if(error.status == 401) this.auth.updateAccessToken(account); return throwError(() => error) }) ) }¿Alguien puede sugerir una mejor solución?
Angular tiene una característica llamada interceptor Http para este tipo de casos de uso. Usando interceptor puede interceptar cada solicitud de su proyecto angular. Funciona como un middleware en llamadas http.
Puedes crear un interceptor como este,
@Injectable({ providedIn: 'root', }) export class TokenInterceptorService implements HttpInterceptor { constructor(private auth: TokenService) {} intercept( request: HttpRequest<any>, next: HttpHandler ): Observable<HttpEvent<any>> { let token = this.auth.getToken(); // Attach your token to every request request = request.clone({ setHeaders: { Authorization: `Bearer ${token}`, }, }); return next.handle(request).pipe( catchError(res=>{ if(res instanceof HttpErrorResponse && res.status===401){ // You can write your desired token update logic here let newToken = this.auth.updateAccessToken(account); request = request.clone({ setHeaders: { Authorization: `Bearer ${newToken}`, }, }); // === End section == next.handle(request); }else{ return throwError(res); } }) );} }
Después de eso, debe proporcionar este interceptor en el módulo raíz,
@NgModule({ declarations: [..], imports: [ ... ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService , multi: true, }, ],Ahora, cada llamada http que realice desde un servicio que se proporciona en la raíz pasará por este interceptor. Puede modificar la solicitud de acuerdo con sus necesidades en este servicio de interceptor,
puede encontrar la documentación aquí: https://angular.io/api/common/http/HttpInterceptor