Angular应用启动时根据用户角色路由至不同组件的实现方案

嗨，我来帮你搞定这个Angular动态路由重定向的需求！根据你的描述，现在默认是固定重定向到admin-portal，要改成根据localStorage里的用户角色来动态决定跳转目标，这里有两个靠谱的方案，你可以根据你的Angular版本来选：

方案一：使用Angular 14+的动态redirectTo函数 #

Angular 14及以上版本支持把redirectTo设为一个函数，这样就能直接在路由配置里动态返回跳转路径，非常简洁：

const routes: Routes = [
  {
    path: '',
    // 通过函数根据localStorage的角色返回对应路由
    redirectTo: () => {
      const userRole = localStorage.getItem('userRole');
      // 可根据实际情况调整默认值，比如没有角色时跳转到登录页
      return userRole === 'admin' ? 'admin-portal' : 'customer-portal';
    },
    pathMatch: 'full'
  },
  {
    path: 'admin-portal',
    component: AdminPortalComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'customer-portal',
    component: CustomerPortalComponent,
    canActivate: [AuthGuard]
  }
];

方案二：兼容旧版本的空组件跳转 #

如果你的Angular版本低于14，不支持redirectTo函数，那就可以创建一个空的重定向组件，在组件初始化时完成跳转：

第一步：生成空组件 #

用Angular CLI快速创建一个没有模板和样式的组件：

ng generate component root-redirect --inline-template --inline-style

第二步：编写组件逻辑 #

在root-redirect.component.ts里注入Router，根据localStorage的角色跳转：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root-redirect',
  template: '', // 空模板
  styles: []    // 空样式
})
export class RootRedirectComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    const userRole = localStorage.getItem('userRole');
    
    // 根据角色跳转，建议加上无角色时的处理（比如跳登录页）
    if (userRole === 'admin') {
      this.router.navigate(['/admin-portal']);
    } else if (userRole === 'customer') {
      this.router.navigate(['/customer-portal']);
    } else {
      // 如果没有获取到角色，跳转到登录页
      this.router.navigate(['/login']);
    }
  }
}

第三步：修改路由配置 #

把根路径指向这个空组件：

const routes: Routes = [
  {
    path: '',
    component: RootRedirectComponent,
    pathMatch: 'full'
  },
  {
    path: 'admin-portal',
    component: AdminPortalComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'customer-portal',
    component: CustomerPortalComponent,
    canActivate: [AuthGuard]
  }
];

额外建议：强化AuthGuard的角色校验 #

为了防止用户手动输入URL越权访问其他角色的门户，最好在你的AuthGuard里加上角色校验逻辑：

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

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

  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    const userRole = localStorage.getItem('userRole');

    // 未登录/无角色时跳登录页
    if (!userRole) {
      this.router.navigate(['/login']);
      return false;
    }

    // 校验当前用户角色是否能访问目标路由
    if (state.url.includes('admin-portal') && userRole !== 'admin') {
      this.router.navigate(['/customer-portal']);
      return false;
    }

    if (state.url.includes('customer-portal') && userRole !== 'customer') {
      this.router.navigate(['/admin-portal']);
      return false;
    }

    return true;
  }
}

这样一来，不管是启动时的自动重定向，还是用户手动访问路由，都能保证角色和UI的匹配啦！

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