Angular router.navigate无法跳转至目标页面问题求助

Let's break down the issues preventing your login redirect and fix them step by step:

1. Critical Error: Incorrect router.navigate Syntax #

The biggest blocker here is how you're calling the router's navigate method in your LoginComponent. You’re using bracket notation (this.router.navigate['app/analytics']) like it’s an array, but navigate is a method that requires an array of route segments as its first argument.

Wrong Code: #

this.router.navigate['app/analytics'];

Corrected Code: #

// Call it as a method, passing the route path as an array
this.router.navigate(['app/analytics']);

Also, it’s better to set the logged-in state before navigating, so the AuthGuard can properly validate the user’s status:

if(data.status == "success") {
  this.auth.setLoggedIn(true); // Move this first to ensure AuthGuard sees the updated state
  console.log(this.auth.isLoggedIn);
  this.router.navigate(['app/analytics']); // Fixed navigate call
}

2. Verify AuthGuard Implementation #

Since your app route is protected by AuthGuard, you need to ensure the guard correctly checks the logged-in state from your AuthService. Here’s a standard implementation to reference:

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.auth.isLoggedIn) {
      return true; // Allow access to protected app routes
    }
    // Redirect to login if user isn't authenticated
    this.router.navigate(['/login']);
    return false;
  }
}

Double-check that your AuthService’s setLoggedIn method properly updates the isLoggedIn property (ensure it’s a persistent boolean, not just a local variable that resets unexpectedly).

3. Confirm Router Outlet Placement #

You mentioned having <router-outlet> in both layout.template and app.component—this setup is correct, but just to confirm:

• The top-level <router-outlet> in app.component.html handles root routes like login, error, and loads the LayoutComponent for the app path.
• The <router-outlet> inside LayoutComponent’s template renders child routes like analytics, profile, etc. Make sure neither outlet is hidden or removed by CSS or conditional logic.

4. Quick Route Configuration Check #

Your route setup looks mostly correct, but a quick validation:

• The empty path redirect ('' -> app/analytics) works only when the user visits the root URL after being logged in (since app is protected by AuthGuard).
• The wildcard route (**) correctly catches all invalid paths, which is ideal for error handling.

Final Updated LoginComponent Code #

Here’s the fully fixed login method with all corrections applied:

loginUser(event) {
  event.preventDefault();
  const target = event.target;
  const username = target.querySelector('#username').value;
  const password = target.querySelector('#password').value;
  
  this.auth.getUserDetails(username, password).subscribe(data => {
    console.log(data.status);
    if(data.status === "success") {
      this.auth.setLoggedIn(true);
      console.log(this.auth.isLoggedIn);
      this.router.navigate(['app/analytics']); // Fixed method call
    } else {
      window.alert(data.message);
    }
  });
}

After making these changes, your login form should correctly redirect to the analytics page once authentication succeeds.

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