Refre sh токен Angular - PullRequest
Новая
       9

Refre sh токен Angular

0 голосов
/ 18 марта 2020

Я создал сервис для вызова API из моего angular приложения. В этом сервисе я объявил переменные ROOT_URL и TOKEN и присвоил им значения.

Ниже объявления есть несколько методов get для API, использующих вышеупомянутые ROOT_URL и TOKEN.

Проблема, с которой я сталкиваюсь, заключается в том, что срок действия этого значения TOKEN истекает каждые 24 часа, поэтому мне приходится менять его каждый день. Я использую предыдущий токен, чтобы получить токен refre sh с помощью почтальона.

Может кто-нибудь дать мне решение, как я могу реализовать это автоматически каждый раз, когда истекает TOKEN?

1 Ответ

0 голосов
/ 18 марта 2020

Вы можете использовать перехватчик HTTP. Вы можете проверить эту статью из Angular Академии.

Ниже вы можете найти пример, который я реализовал в соответствии со своими потребностями (я использовал эту статью в качестве отправной точки для этой реализации ). В этом примере предполагается, что вы генерируете refre sh токен на своем сервере. На моем бэкэнде я генерирую токен доступа (с короткой продолжительностью жизни) и токен refre sh (с большей продолжительностью жизни). Я использую токены refre sh только для генерации новых токенов доступа, а не для авторизации. Вы можете хранить токены, например, в локальном хранилище или готовить ie и получать их оттуда в службе. 

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';
import { AuthService } from './auth.service';
import { IUserResponse } from '../shared/user.model';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  // for avoiding entering an infinite loop
  private isRefreshing = false;

  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.authService.accessToken) {
      request = this.setToken(request, this.authService.accessToken);
    }

    return next.handle(request).pipe(
      catchError(error => {
        if (error instanceof HttpErrorResponse && error.status === 401 && this.authService.refreshToken) {
          return this.handleAuthorizationError(request, next);
        } else {
          return throwError(error);
        }
      })
    );
  }

  private setToken(request: HttpRequest<any>, token: string): HttpRequest<any> {
    return request.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
  }

  private handleAuthorizationError(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.isRefreshing) {
      this.isRefreshing = true;

     // I have created a route on my back-end to generate a new access token
      return this.authService.getRefreshToken().pipe(
        switchMap((response: IUserResponse) => {
          this.isRefreshing = false;

          return next.handle(this.setToken(request, response.user.accessToken));
        })
      );
    } else {
      return next.handle(request);
    }
  }
}
...