如何使用Angular CanActivate守卫管理Navbar权限及组件放置

Hey there! Let's work through your Navbar visibility and authentication guard issues step by step. Here's how to get everything set up correctly:

1. Where to Place the Navbar Component #

Right now your app.component.html only has a <router-outlet>, which is perfect as a starting point. We'll add the Navbar here, but wrap it in an *ngIf to only show it when the user is authenticated. This works because the root AppComponent is rendered for every route, so the Navbar will be consistent across all authenticated pages.

Update your app.component.html like this:

<!-- app.component.html -->
<app-navbar *ngIf="isAuthenticated"></app-navbar>
<router-outlet></router-outlet>

Then in app.component.ts, we'll track the authentication status by subscribing to your AuthService:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  isAuthenticated = false;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    // Subscribe to authentication status changes
    this.authService.isLoggedIn$.subscribe(status => {
      this.isAuthenticated = status;
    });
  }
}

2. Fix the Authentication Guard (CanActivate) #

Your current canActivate logic is inside the LoginComponent, which isn't the right approach. Guards should be standalone services that protect routes. Let's create a proper AuthGuard:

Step 2.1: Create the AuthGuard Service #

Generate a new service (or create manually) called auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate, Router, UrlTree } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean | UrlTree {
    // Check if user is authenticated: either from AuthService state or localStorage token
    const isAuthenticated = this.authService.isAuthenticated() || !!localStorage.getItem('token');
    
    if (isAuthenticated) {
      return true; // Allow access to the route
    } else {
      // Redirect unauthenticated users to login page
      return this.router.createUrlTree(['/']);
    }
  }
}

Step 2.2: Update AuthService to Track Login State #

We'll use a BehaviorSubject in AuthService to keep track of the user's login status, so components can react to changes:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
// Import HttpClient if you're making API calls for login
// import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  // BehaviorSubject holds the current login status (initial value checks localStorage)
  private loggedIn = new BehaviorSubject<boolean>(!!localStorage.getItem('token'));
  isLoggedIn$ = this.loggedIn.asObservable(); // Expose observable for components to subscribe

  constructor(/* private http: HttpClient */) {}

  login(credentials) {
    // Replace with your actual login API call
    // return this.http.post('/api/login', credentials);
    return /* your login observable here */;
  }

  // Helper method to get current authentication status
  isAuthenticated(): boolean {
    return this.loggedIn.value;
  }

  // Update login status when user logs in/out
  setLoggedInStatus(status: boolean) {
    this.loggedIn.next(status);
  }
}

Step 2.3: Fix LoginComponent's signIn Method #

Update your login logic to update the AuthService state and redirect after successful login:

// LoginComponent.ts
signIn(credentials){
 this.authaervice.login(credentials)
 .subscribe(result=>{
   if(result){
     localStorage.setItem('token', result.toString());
     this.authaervice.setLoggedInStatus(true); // Notify AuthService of successful login
     this.router.navigate(['/app-dashboard']); // Redirect to dashboard
   } else {
     // Handle login failure (e.g., show error message to user)
     console.error('Login failed');
   }
 });
}

3. Protect Routes with AuthGuard #

Update your route configuration in app.module.ts to add the AuthGuard to all routes that require authentication:

RouterModule.forRoot([
  { path: '', component: LoginComponent },
  { path: 'app-events', component: EventsComponent, canActivate: [AuthGuard] },
  { path: 'app-turbine-comparison', component: TurbineComparisonComponent, canActivate: [AuthGuard] },
  { path: 'app-dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'app-overview', component: OverviewComponent, canActivate: [AuthGuard] }
]),

4. Add Logout Functionality to Navbar #

Update your Navbar component to handle the "Exit" click, clearing the token and updating authentication status:

Navbar Component TypeScript #

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  constructor(private authService: AuthService, private router: Router) {}

  logout() {
    localStorage.removeItem('token');
    this.authService.setLoggedInStatus(false);
    this.router.navigate(['/']); // Redirect to login page
  }
}

Navbar Template Update #

Change the Exit link to call the logout method:

<li class="nav-item">
  <a class="nav-link" (click)="logout()">Exit </a>
</li>

Key Notes #

• The Navbar is only rendered when isAuthenticated is true, so unauthenticated users won't see it at all.
• The AuthGuard ensures that even if a user tries to directly access a protected route (e.g., by typing the URL), they'll be redirected to the login page.
• Using a BehaviorSubject in AuthService ensures that all components (like AppComponent) react immediately when the login status changes.

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