Angular CanActivate守卫失效：访问supervisor页面显示空白未跳转登录

Hey there, let's break down the problems you're facing with your Angular guards and get them fixed right away. I've spotted two key issues in your code that are causing the blank pages when accessing supervisor routes, plus the root path redirect not working as expected.

1. Critical Error in AuthService Getter Methods #

The biggest culprit is how you're returning the login state in your AuthService—you're treating boolean variables as functions, which throws an error and breaks your guard logic entirely.

Original Broken Code Snippet: #

getStudentLoggedIn() {
  return this.isStudentLoggedIn(); // ❌ `isStudentLoggedIn` is a variable, not a function
}

getSupervisorLoggedIn() {
  return this.isSupervisorLoggedIn(); // ❌ Same mistake here
}

Corrected AuthService: #

@Injectable()
export class AuthService {
  private isStudentLoggedIn: boolean;
  private isSupervisorLoggedIn: boolean;

  constructor() {
    this.isStudentLoggedIn = false;
    this.isSupervisorLoggedIn = false;
  }

  setStudentLoggedIn() {
    this.isStudentLoggedIn = true;
  }

  getStudentLoggedIn() {
    return this.isStudentLoggedIn; // ✅ Return the variable directly
  }

  setSupervisorLoggedIn() {
    this.isSupervisorLoggedIn = true;
  }

  getSupervisorLoggedIn() {
    return this.isSupervisorLoggedIn; // ✅ Fixed this getter too
  }
}

Why This Breaks Things: #

When your SupervisorGuard calls this.supervisor.getSupervisorLoggedIn(), the original code throws a TypeError: this.isSupervisorLoggedIn is not a function exception. This error stops the guard's execution cold—so the redirect to /login never runs, leaving you with a blank page instead of the expected login screen.

2. Fixing the Root Path Redirect #

Your current route config sets path: '' to render the LoginScreenComponent directly, but if you want it to redirect to /login (which aligns with your stated intent), update the route to use redirectTo with pathMatch: 'full':

Corrected Route Config: #

export const appRoutes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' }, // ✅ Redirect root path to login
  { path: 'login', component: LoginScreenComponent },
  { path: 'student', component: StudentDownloadComponent, canActivate: [StudentGuard] },
  { path: 'student/download', component: StudentDownloadComponent, canActivate: [StudentGuard] },
  { path: 'student/upload', component: StudentUploadComponent, canActivate: [StudentGuard] },
  { path: 'supervisor', component: SupervisorUploadComponent, canActivate: [SupervisorGuard] },
  { path: 'supervisor/upload', component: SupervisorUploadComponent, canActivate: [SupervisorGuard] },
  { path: 'supervisor/logs', component: SupervisorLogsComponent, canActivate: [SupervisorGuard] },
  { path: 'supervisor/overzicht', component: SupervisorOverzichtComponent, canActivate: [SupervisorGuard] }
];

The pathMatch: 'full' ensures the redirect only triggers when the entire URL is the root path, not just a partial match.

Extra Recommendation (Optional but Useful) #

For more robust state management, consider using BehaviorSubject instead of plain boolean variables in AuthService. This lets components and guards react to changes in login state automatically:

@Injectable()
export class AuthService {
  private isStudentLoggedIn$ = new BehaviorSubject<boolean>(false);
  private isSupervisorLoggedIn$ = new BehaviorSubject<boolean>(false);

  get studentLoggedIn$() {
    return this.isStudentLoggedIn$.asObservable();
  }

  get supervisorLoggedIn$() {
    return this.isSupervisorLoggedIn$.asObservable();
  }

  setStudentLoggedIn() {
    this.isStudentLoggedIn$.next(true);
  }

  setSupervisorLoggedIn() {
    this.isSupervisorLoggedIn$.next(true);
  }
}

Then update your guard to use the observable:

canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<boolean> {
  return this.supervisor.supervisorLoggedIn$.pipe(
    tap(isLoggedIn => {
      if (!isLoggedIn) {
        this.router.navigate(['/login']);
      }
    })
  );
}

This makes your login state more reactive and avoids potential edge cases with synchronous state checks.

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