如何在Angular中使用AuthGuard为两个不同的用户角色提供对同一菜单的路由访问？

// auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 获取用户角色信息
    const roles = route.data.roles as string[];

    // 根据用户角色判断是否有权限访问该路由
    if (roles.includes('admin')) {
      // 管理员角色有权限访问
      return true;
    } else if (roles.includes('user')) {
      // 普通用户角色有权限访问
      return true;
    } else {
      // 其他角色没有权限访问
      return false;
    }
  }
}

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AdminComponent } from './admin.component';
import { UserComponent } from './user.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], data: { roles: ['admin'] } },
  { path: 'user', component: UserComponent, canActivate: [AuthGuard], data: { roles: ['user'] } },
];

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

// admin.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-admin',
  template: '<h1>Admin Component</h1>'
})
export class AdminComponent { }

// user.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: '<h1>User Component</h1>'
})
export class UserComponent { }