Angular 2刷新訪問令牌401錯誤並重復初始請求

Question

TLDR：我的任務是完成3個請求而不是1，並返回最后一個響應作為對第一個請求的響應，而不對請求發起者進行任何其他修改。

我已經擴展了Angular Http類，以自動將授權標頭附加到我的所有請求，並實現我自己的授權錯誤處理。

它看起來像這樣：

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {

    // ... append some headers

    super.request(url, options).catch((error: Response) => {
      if (error.status === 401 || error.status === 403 ) {
        // todo: Send refreshToken request to get new credentials
        // todo: Send current request again with new credentials

        // todo: If request is completed properly pretend everything was fine and return response
      }
    });
  }

我想捕獲授權錯誤，通過發送令牌刷新請求並返回對初始請求的正確響應來修復它們。

現在有很多代碼使用http ，我不想改變它，所以必須返回固定的響應，因為初始沒有任何人知道它。

其中一種方法是使用同步請求，但我認為這不是一個好主意。

如果解決方案可行，您能告訴我，我該如何實現？

PS。 在刷新令牌時執行另一個請求並且崩潰到授權中導致另一個令牌刷新時，可能會出現問題。 但現在這並不重要。

Answer 1

目標主要是通過使用flatMap來組合請求來實現的。

主要功能：

• 檢查請求請求是否返回401
• 如果401：嘗試修復更新必要的令牌並再次發送請求
• 如果修復了錯誤，則訂戶對錯誤一無所知

它旨在與REST身份驗證模型一起使用，其中包括：

• 來賓令牌 - 適用於未經授權的用戶（ gToken ）
• 身份驗證令牌 - 適用於授權用戶 - （ aToken ）
• 刷新令牌 - 刷新過期的aToken（ refresh_token ）

很可能你需要重寫請求以適合你的后端，但這里提供的是一個評論很好的服務，而不是默認的Http ：

import {Injectable} from '@angular/core';
import {
  Http, XHRBackend, RequestOptions, RequestOptionsArgs, Request, Response, RequestMethod,
  Headers
} from "@angular/http";
import { Observable } from "rxjs";
import { StorageService } from "../storage.service";
import { AppService } from "./app.service";

@Injectable()
export class HttpClientService extends Http {

  private autoAppendHeadersDefault = true;

  constructor(
    backend: XHRBackend,
    defaultOptions: RequestOptions,
    private storageService: StorageService,
    private appState: AppService,
  ) {
    super(backend, defaultOptions);
    this.autoAppendHeadersDefault = this.appState.hoodConfig.HTTP_AUTO_APPEND_HEADERS;
  }

  request(url: string | Request, options?: RequestOptionsArgs, disableTryFix = false): Observable<Response> {

    // Checking if the request needs headers to be appended
    let assetRequest = false;
    if(url instanceof Request) {
      if(url.url.startsWith("/assets")) {
        assetRequest = true;
      }
    }

    // Appending headers
    if(!assetRequest && this.appState.hoodConfig.HTTP_AUTO_APPEND_HEADERS && url instanceof Request) {

      // append aToken || gToken
      let token = this.storageService.get('aToken');
      if('undefined' === typeof token || !token) {
        token = this.storageService.get('gToken');
      }

      if('undefined' !== typeof token && token) {
        url.headers.set('Authorization', `Bearer ${token}`);
      } else {
        // neither aToken nor gToken are set
        if(disableTryFix) {
          this.removeAllTokens();
          return Observable.throw({error: "Can't reauth: 01"});
        }
        return this.tryFixAuth().flatMap(
          (res:any) => {
            res = res.json();
            this.storageService.set('gToken', res.access_token);
            return this.request(url, options, true);
          }
        );
      }

      // headers appended to every request
      if(!url.headers.get('Content-Type')) {
        url.headers.append('Content-Type', 'application/json');
      }
    }
    this.appState.hoodConfig.HTTP_AUTO_APPEND_HEADERS = this.autoAppendHeadersDefault;

    return super.request(url, options).catch((error: Response) => {
      if (error.status === 401 /* || error.status === 403 */ ) {

        if(disableTryFix) {
          this.removeAllTokens();
          this.navigateOnAuthFail();
          return Observable.throw({error: "Can't reauth: 02"});
        }

        return this.tryFixAuth().flatMap(
          (res: any) => {
            res = res.json();

            if('undefined' !== typeof res.refresh_token)
            {
              // got aToken & refresh_token
              this.storageService.set('aToken', res.access_token);
              this.storageService.set('refresh_token', res.refresh_token);
            }
            else if('undefined' !== typeof res.access_token)
            {
              // got only gToken
              this.storageService.set('gToken', res.access_token);
            }
            else
            {
              console.log('tryFix: nothing useful returned')
              // got no aToken, no gToken, no refresh_token
            }

            // retry request
            return this.request(url, options, true);
          }
        );
      }

      // handle invalid refresh_token
      if(disableTryFix && error.status === 400) {
        console.log('Wrong refresh token (400)');
        this.storageService.remove('refresh_token');
        this.storageService.remove('aToken');
        this.navigateOnAuthFail();
        // handle invalid refresh token
      }
      return Observable.throw(error);
    });
  }

  private tryFixAuth(): Observable<Response> {
    console.log('Trying to fix auth');

    if(this.storageService.get('refresh_token'))
    {
      return this.refreshToken();
    }
    else if(this.storageService.get('aToken'))
    {
      // no refresh_token, but aToken
      // since aToken is dead it's not useful
      this.storageService.remove('aToken');
    }
    else
    {
      // no aToken, no refresh_token
      // possibly there's a gToken
      // since the request is trying to fix itself (is failed) the gToken is most likely not valid
      return this.guestToken();
    }
  }

  // sends request with refresh_token to get new aToken
  // the request returns only aToken and refresh_token, no gToken
  private refreshToken(): Observable<Response> {

    // is called only when refresh_token is set
    let refreshToken = this.storageService.get('refresh_token');

    // check refresh_token in case it's not checked before
    if('undefined' === typeof refreshToken || !refreshToken || refreshToken == 'undefined') {
      this.storageService.remove('refresh_token');
      // there's no refresh_token saved
      return Observable.throw({error: "Refresh token is not set"});
    }

    // form refresh_token request
    const headers = new Headers();
    headers.append('Authorization', `Bearer ${this.storageService.get('gToken')}`);
    headers.append('Content-Type', 'application/json');

    const url = `${this.appState.config.WEBSITE_ENDPOINT}/oauth/v2/token`;
    const localData = JSON.stringify({
      "client_id": this.appState.config.CLIENT_ID,
      "client_secret": this.appState.config.CLIENT_SECRET,
      "grant_type": 'refresh_token',
      "refresh_token": refreshToken
    });

    this.appState.hoodConfig.HTTP_AUTO_APPEND_HEADERS = false;

    // refresh_token request
    return this.request(
      new Request({
        method: RequestMethod.Post,
        url: url,
        headers: headers,
        body: localData
      }),
      null, true);
  }

  // sends request to get new gToken
  private guestToken(): Observable<Response> {
    const url = `${
      this.appState.config.WEBSITE_ENDPOINT}/oauth/v2/token?client_id=${
      this.appState.config.CLIENT_ID}&client_secret=${
      this.appState.config.CLIENT_SECRET}&grant_type=client_credentials`;
    this.appState.hoodConfig.HTTP_AUTO_APPEND_HEADERS = false;
    return super.get(url);
  }


  // Aux methods

  private navigateOnAuthFail() {
    console.warn('Page is going to be refreshed');

    // redirect to auth is performed after reload by authGuard
    // it's possible to add some warning before reload
    window.location.reload();
  }

  private removeAllTokens() {
    this.storageService.remove('aToken');
    this.storageService.remove('gToken');
    this.storageService.remove('refresh_token');
  }
}