Angular 5页面刷新后空白且无激活路由问题求助

Hey there! Let's break down why your page goes blank after a refresh and no route stays active, based on your AuthService code snippet:

1. Async User Loading Delays Route Initialization #

Your getUser call is asynchronous (using subscribe), but when the page refreshes, the router might finish initializing before your user data loads. If your route guards depend on a currentUser state that's not yet set, the guard might block navigation without redirecting anywhere—leaving you with a blank page.

Fix: #

Add a loading state tracker to your AuthService, and ensure navigation happens only after user data is loaded (or fails to load):

export class AuthService {
  private userLoaded$ = new BehaviorSubject<boolean>(false);
  userLoadedObservable$ = this.userLoaded$.asObservable();
  private currentUserSubject = new BehaviorSubject<User | null>(null);
  currentUser$ = this.currentUserSubject.asObservable();

  constructor(private userService: UserService, private router: Router, private jwtHelper: JwtHelperService) {
    const token = localStorage.getItem('token');
    if (token) {
      const user = jwtHelper.decodeToken(token);
      userService.getUser(user).subscribe(
        data => {
          this.setCurrentUser(data);
          this.userLoaded$.next(true);
          // Navigate to the intended route or default dashboard if on root
          const targetUrl = this.router.url === '/' ? '/dashboard' : this.router.url;
          this.router.navigate([targetUrl]);
        },
        error => {
          console.error(error);
          this.userLoaded$.next(true);
          // Clean up invalid token and redirect to login
          localStorage.removeItem('token');
          this.router.navigate(['/login']);
        }
      );
    } else {
      this.userLoaded$.next(true);
      this.router.navigate(['/login']);
    }
  }

  setCurrentUser(user: User) {
    this.currentUserSubject.next(user);
  }

  getCurrentUser() {
    return this.currentUserSubject.value;
  }
}

2. Route Guards Aren't Handling Initial Loading State #

If your CanActivate guards immediately return false before user data loads, they'll block all navigation without redirecting.

Fix: #

Update your guard to wait for the user loading state to complete before making a decision:

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.userLoadedObservable$.pipe(
      switchMap(() => {
        const currentUser = this.authService.getCurrentUser();
        if (currentUser) {
          return of(true);
        } else {
          // Redirect to login with the original intended URL
          this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
          return of(false);
        }
      })
    );
  }
}

3. Verify setCurrentUser Updates State Correctly #

Double-check that your setCurrentUser method properly updates a reactive state (like a BehaviorSubject). If this method isn't broadcasting the user data to components/guards, the app won't recognize the user as logged in, even after data loads.

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