如何结合subscribe异步方法，触发AuthService的refresh_token刷新access_token？

Alright, let's walk through how to make that auto-refresh work for your specified scenario. You’ve already got the core refresh method in your AuthService, so we just need to wire it up to trigger automatically when the right moment hits. Here’s a practical, Angular-focused solution (since your code uses Angular's HTTP utilities):

First, clarify what exactly triggers the auto-refresh. Common scenarios include:

• Navigating to a protected route (like /dashboard)
• Loading a specific component (e.g., CheckoutComponent)
• App initialization (when the user first opens the app)

We’ll use route navigation as our primary example—it’s a common use case for token refresh, but the logic adapts easily to other scenarios.

Option A: Use a Route Guard (Best for Protected Routes) #

A route guard runs before a route loads, making it ideal for ensuring a valid access token exists before the user sees protected content.

First, create the guard:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { tap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RefreshTokenGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate() {
    return this.authService.refresh().pipe(
      // Update your stored tokens with the new values from the API response
      tap((response: any) => {
        this.authService.storage.setAccessToken(response.access_token);
        this.authService.storage.setRefreshToken(response.refresh_token);
      }),
      // Handle refresh failures (e.g., invalid refresh token)
      catchError((error) => {
        console.error('Token refresh failed:', error);
        this.router.navigate(['/login']); // Redirect to login if refresh fails
        return of(false);
      })
    );
  }
}

Then attach the guard to your target route in app-routing.module.ts:

const routes: Routes = [
  { 
    path: 'dashboard', 
    component: DashboardComponent, 
    canActivate: [RefreshTokenGuard] 
  },
  // Other routes...
];

Option B: Use Component's ngOnInit (For Component-Specific Triggers) #

If you want to refresh when a specific component loads, add the logic directly to its ngOnInit lifecycle hook:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
import { tap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService.refresh().pipe(
      tap((response: any) => {
        // Update stored tokens
        this.authService.storage.setAccessToken(response.access_token);
        this.authService.storage.setRefreshToken(response.refresh_token);
      }),
      catchError((error) => {
        console.error('Refresh failed:', error);
        window.location.href = '/login'; // Redirect to login on failure
        return of(null);
      })
    ).subscribe(); // Critical: Subscribe to trigger the HTTP request!
  }
}

• Check Token Expiry First: Don’t refresh if the access token is still valid. Add a helper method to your AuthService to check expiry:

  isAccessTokenExpired(): boolean {
    const token = this.storage.getAccessToken();
    if (!token) return true;
    // Decode JWT to get expiry time
    const decodedPayload = JSON.parse(atob(token.split('.')[1]));
    const expiryTimestamp = decodedPayload.exp * 1000;
    return Date.now() >= expiryTimestamp;
  }
  

  Then modify your refresh logic to only run when needed:

  if (this.authService.isAccessTokenExpired()) {
    // Run refresh code here
  }
  

• Prevent Duplicate Requests: If the user navigates quickly, avoid multiple refresh calls by adding a flag:

  private isRefreshing = false;
  private refreshSubject = new Subject<any>();
  
  refresh() {
    if (this.isRefreshing) {
      return this.refreshSubject.asObservable();
    }
    this.isRefreshing = true;
  
    const body = new HttpParams() 
      .set('grant_type', 'refresh_token') 
      .set('refresh_token', this.storage.getRefreshToken()); 
    let headers = new HttpHeaders(); 
    headers = headers.append("Authorization", "Basic " + btoa("my-client:secret")); 
    headers = headers.append("Content-Type", "application/x-www-form-urlencoded"); 
  
    return this.http.post('http://localhost:8090/oauth/token', body.toString(), { headers: headers})
      .pipe(
        tap((response) => {
          this.refreshSubject.next(response);
        }),
        finalize(() => {
          this.isRefreshing = false;
          this.refreshSubject.complete();
        })
      );
  }
  

• Secure Token Storage: Ensure your storage service uses secure methods (avoid plain localStorage for sensitive tokens if possible—consider Angular's @angular/local-storage or platform-specific secure storage).

Always subscribe to the refresh() observable—without subscribing, the HTTP request will never execute!

内容的提问来源于stack exchange，提问作者Youlfey