Angular页面刷新时Resolver未触发API请求报401错误求助

Hey there, let's break down this resolver issue you're facing—this kind of inconsistent behavior between route navigation and page reload is super common with Angular resolvers, so let's dig into it step by step.

Problem Recap #

• ✅ Navigating to the target route from another component: Resolver works as expected, calls the API, and the page loads correctly.
• ❌ Refreshing the target route page: Resolver doesn't trigger the API call, and you get an uncaught 401 error.

Likely Root Causes & Troubleshooting Steps #

1. Auth Token Missing/Not Initialized on Page Reload #

When you refresh the page, your Angular app restarts—any auth tokens stored in memory get wiped, and if your app doesn't load the token from localStorage/sessionStorage before the resolver runs, the API request will fail with 401 (or not run at all if token checks block it).

Troubleshoot:

• Add console.log at the start of your CompanyResolver's resolve method to print the current auth token (pulled from your auth service). If it's undefined on reload, that's the issue.
• Check if your auth service loads the token asynchronously (e.g., from storage) and if that initialization happens after the resolver runs.

2. Resolver Isn't Actually Triggered on Reload #

Sometimes misconfigured routes or race conditions with route guards can prevent the resolver from executing on reload.

Troubleshoot:

• Double-check your route configuration to ensure the resolver is correctly bound:

  // Example correct route config
  {
    path: 'company/:id',
    component: CompanyEditComponent,
    resolve: { company: CompanyResolver }, // Make sure this points to your resolver class
    canActivate: [AuthGuard] // If using guards, ensure they don't block resolver execution
  }
  

• Add console.log('Resolver running...') at the top of the resolve method—if you don't see this log on reload, the resolver isn't being triggered. This usually means a route guard is redirecting before the resolver runs, or the route path doesn't match on reload.

3. Unhandled Errors in the Resolver or Service #

If the resolver's API call hits a 401 and there's no error handling, the uncaught exception can stop the resolver from completing, making it look like the API wasn't called.

Troubleshoot:

• Open your browser's Network tab and reload the page—check if the API request is actually being sent. If it is, look at the request headers to confirm the auth token is present.
• Check your company.service.ts to ensure it's adding the auth token to the request headers correctly (especially on reload).

Fix Recommendations #

1. Load Auth Token Before App Initialization #

Use Angular's APP_INITIALIZER to load your auth token from storage before any resolvers or guards run. This ensures the token is available when the resolver makes its API call.

// app.module.ts
import { APP_INITIALIZER } from '@angular/core';
import { AuthService } from './auth.service';

// Factory function to load token on app start
function initializeAuth(authService: AuthService) {
  return () => authService.loadTokenFromStorage(); // This should return a Promise/Observable
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeAuth,
      deps: [AuthService],
      multi: true
    }
  ]
})
export class AppModule {}

2. Add Error Handling to the Resolver #

Catch 401 errors in the resolver to handle them gracefully (e.g., redirect to login) instead of letting them become uncaught exceptions.

// company.resolver.ts
import { EMPTY, Observable, catchError } from 'rxjs';
import { CompanyService } from './company.service';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

// ...
resolve(route: ActivatedRouteSnapshot): Observable<Company> {
  const companyId = route.paramMap.get('id');
  
  if (!companyId) {
    this.router.navigate(['/companies']);
    return EMPTY;
  }

  return this.companyService.getCompany(companyId).pipe(
    catchError((error) => {
      if (error.status === 401) {
        this.authService.logout();
        this.router.navigate(['/login']);
      }
      return EMPTY;
    })
  );
}

3. Ensure Route Guards Play Nice with Resolvers #

If you're using CanActivate guards, make sure they resolve their observables/promises before the resolver runs. For example, your auth guard should confirm the user is authenticated before the resolver tries to fetch data:

// auth.guard.ts
import { Observable, tap } from 'rxjs';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

// ...
canActivate(): Observable<boolean> {
  return this.authService.isAuthenticated().pipe(
    tap(isAuthenticated => {
      if (!isAuthenticated) {
        this.router.navigate(['/login']);
      }
    })
  );
}

4. Verify Your Service's API Call Logic #

Double-check your company.service.ts to ensure it's attaching the auth token to every request, even on page reload:

// company.service.ts
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service';

// ...
getCompany(id: string): Observable<Company> {
  const headers = new HttpHeaders({
    'Authorization': `Bearer ${this.authService.getToken()}`
  });
  return this.http.get<Company>(`/api/companies/${id}`, { headers });
}

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