Angular 12：如何基于用户角色实现登录后定向跳转？

Alright, let's work through this scenario you're dealing with. Since you're already using canActivate guards, we can build on that to handle both the default landing pages and access control cleanly. Here's a step-by-step solution:

1. Enhance Your AuthGuard to Handle Role Checks & Redirects #

First, we'll update your existing guard to not only verify authentication but also enforce role-based access and manage root path redirects. This ensures users land on the correct page whether they're logging in directly or navigating to the root URL.

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

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const currentUser = this.authService.getCurrentUser();

    // Redirect unauthenticated users straight to login
    if (!currentUser) {
      this.router.navigate(['/login']);
      return false;
    }

    const userRole = currentUser.role;
    const targetUrl = state.url;

    // Handle root path (default landing) redirect based on role
    if (targetUrl === '/') {
      if (userRole === 'Admin') {
        this.router.navigate(['/home']);
      } else if (userRole === 'User') {
        this.router.navigate(['/userview']);
      }
      return false; // Block the original root request since we're redirecting
    }

    // Enforce access rules for specific routes
    if (targetUrl === '/home' && userRole !== 'Admin') {
      // User role can't access Home, redirect to their allowed page
      this.router.navigate(['/userview']);
      return false;
    }

    // Allow both roles to access UserView (as per your requirement)
    if (targetUrl === '/userview') {
      return true;
    }

    // Fallback: Allow Admin access to Home and any other admin-only routes you add later
    return userRole === 'Admin';
  }
}

2. Adjust Your Routing Configuration #

Update your route setup to protect all restricted paths with the guard, and set the root path to use the guard so it triggers our redirect logic:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { UserViewComponent } from './user-view/user-view.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  // Protect both Home and UserView with the guard
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'userview', component: UserViewComponent, canActivate: [AuthGuard] },
  // Root path: Let the guard handle redirect based on user role
  { path: '', canActivate: [AuthGuard], pathMatch: 'full' },
  // Catch-all route redirects to root (guard will handle the final destination)
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. Add Login-Time Redirect for Smoother UX #

To make the experience more immediate, add a direct redirect right after successful login (instead of waiting for the guard to kick in). This way users land on their correct page instantly:

// Inside your LoginComponent
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private authService: AuthService,
    private router: Router
  ) {
    this.loginForm = this.fb.group({
      username: [''],
      password: ['']
    });
  }

  onSubmit() {
    this.authService.login(this.loginForm.value).subscribe({
      next: (user) => {
        // Redirect immediately based on the user's role
        if (user.role === 'Admin') {
          this.router.navigate(['/home']);
        } else if (user.role === 'User') {
          this.router.navigate(['/userview']);
        }
      },
      error: (error) => {
        // Handle login errors (e.g., invalid credentials)
        console.error('Login failed:', error);
      }
    });
  }
}

Quick Notes #

• Ensure your AuthService has a getCurrentUser() method that returns the authenticated user's details (including their role property).
• The guard acts as a safety net: even if a user tries to manually navigate to a restricted route (like a User trying to access /home), the guard will redirect them correctly.
• The login-time redirect skips the root path step entirely, making the flow feel more responsive.

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