0

所以我有一个返回 observable 的 put 方法，在这个方法中我需要检查令牌是否有效，如果它无效，那么我需要调用另一个可以创建新刷新令牌的方法，我需要订阅到这个方法，这样我就可以更新本地刷新令牌的值，然后返回 put 方法的可观察对象。

这是我到目前为止所拥有的：

    public putRequest(endpoint: string, body: any):
     Observable < APIResponseModel < any >> {
      if (this.authService.isValidToken()) {
       //     . . .
      }));
    }
    else {

     // get a new token 
     const refresh = this.authService.refreshToken();

     return refresh.switchMap(response => {

      this.authService.setRefreshToken(response.results.refreshToken);

      return this.httpClient.put < any > (`${endpoint}`, body).pipe(map(result => {
       this.hideLoader();
       return result;
      }));
     }).catch(err => {
      console.log("error occurred! " + err)
      this.authService.redirectToLogin();
      return this.getNullResponse();
     });

    }

AuthService 方法：

  isValidToken(): boolean {
        const token = this.getAuthToken();
        if (!token && this.firstload) {

          return true; }
        if (token && !this.firstload) {
          if (this.jwtHelper.isTokenExpired(token)) { 
            console.log("Token is expired  ");

            return false;
          } else {
            return true;
          }
        } else {
          return false;
        }
      }

  refreshToken(): Observable<APIResponseModel<any>> {

    console.log("refresh token:" + this.getRefreshToken());
    const url = `${environment.baseAPIUrl}/${environment.version}/login/token/refresh`;
    const body = {
      refreshToken: `${this.getRefreshToken()}`
    };
    return this.httpClient.post(url, body).map((response: APIResponseModel<any>) => {
      this.setAuthToken(response.results.token);
      this.setRefreshToken(response.results.refreshToken);
      this.tokenBeingRefreshed = false;
      return response;
    }, err => err);
  }

请注意，我尝试了 SwitchMap 和 MergeMap，但我收到会话已过期的服务器错误。似乎我在等待生成新令牌之前收到此错误。如何确保在调用 httpClient.put 之前创建了新令牌？

4

2 回答 2

0

因此，如果我正确地解决了您的问题，那就是

  • 放
  • if (!token) → GET(token)
  • 重试 PUT

在这种情况下，正确的流程是

getData() {
  return this.http.put(...);
}

getToken() {
  return this.http.get(...);
}

isValidToken() {
  return ...;
}

securedCall() {
  const data$ = this.isValidToken ? 
    this.getData() : 
    this.getToken().pipe(
      switchMap(token => this.getData())
    );

  return data$;
}

比使用运算符更干净、更易于阅读！

于 2018-11-08T12:24:15.787 回答
0

不要担心在服务器中的任何 http 请求之前确保刷新令牌，但是当您在服务器中发出请求时使用 Http Interceptor 在请求标头中设置令牌并在服务器端检查令牌是否过期或签名无效或任何其他错误设置响应头状态 401 并使用 catchError 捕获错误并检查状态是否为 401 然后调用刷新令牌方法，该方法将在服务器中发送请求以使用 switchMap 刷新令牌，如下例所示：

这是httpInterceptor

export class HttpInterceptorService implements HttpInterceptor {

constructor(private auth : AuthService ) { }

isRefreshingToken: boolean = false;

tokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);

intercept(request: HttpRequest<any>, next: HttpHandler) : Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any> | any> {

  if( this.auth.token ) {

      if( this.isRefreshingToken ){ //  next handle when make request to refresh token .........

          return next.handle(this.setRequestHeaders( request ));

      }else{ // request and catch Error when token is expired or any else Error ...........

          return next.handle(this.setRequestHeaders( request ))
              .pipe(
                  catchError(err => { // catch response error from server
                      if (err instanceof HttpErrorResponse) {
                          switch ((<HttpErrorResponse>err).status) {
                              case 401: // if is 401 error
                                  return this.handle401Error(request, next);  // return handle401Error method
                          }
                      } else {
                          return throwError(err);
                      }
                  })
              );

      }

  }else{
      return next.handle(this.setRequestHeaders( request ))
  }

  private setRequestHeaders(request: HttpRequest<any> ) : HttpRequest<any> { // set request headers ......

     if( this.isRefreshingToken ){

         return request.clone({headers :request.headers.set('Refresh-Token',this.auth.refresh_token || '')});

     } 

     else if( this.auth.token ){

           return request.clone({headers :request.headers.set('Token', this.auth.token || '' ) });

     }
  }

  private handle401Error(request: HttpRequest<any>, next: HttpHandler) { // 401 error from server when token is expired ..

  if (!this.isRefreshingToken) {

      this.isRefreshingToken = true;
      // Reset here so that the following requests wait until the token
      // comes back from the refreshToken call.

      this.tokenSubject.next(null);

      return this.auth.refreshToken(clientSignature)  // make request to refresh token return false or new token and new refresh token

          .pipe(  // get result from refresh token ............................

              switchMap((result: any) => {

                  if ( result ) {

                      this.isRefreshingToken = false;

                      this.auth.refresh_tokens( result );

                      this.tokenSubject.next( result );

                      return next.handle(this.setRequestHeaders( request ) );
                  }

                  this.isRefreshingToken = false;

                  this.auth.logout();

                  this.tokenSubject.next(false);

                  return next.handle(request);
              }),
              catchError( err => {

                  this.isRefreshingToken = false;

                  this.auth.logout();

                  this.tokenSubject.next(false);

                  return next.handle(request);

              } ),

              finalize(() => {
                  this.isRefreshingToken = false;
              }),
          );

  } else {
      return this.tokenSubject
          .pipe(filter(token => token != null),
              take(1),
              switchMap( token => {

                  if( token ){

                      return next.handle(this.setRequestHeaders( request ));

                  }else{
                      return next.handle(request);
                  }

              })
        );
  }
 }
}

在 app.module 中提供 http 拦截器：

providers: [

       {
          provide:HTTP_INTERCEPTORS,

          useClass:HttpInterceptorService,

          multi:true

      }
]
于 2018-11-08T13:13:29.013 回答