Angular 5/4中如何为不同类型用户配置不同导航栏？

这问题我之前帮朋友处理过类似的，其实核心就是根据用户角色动态加载不同的导航配置，结合Angular的组件逻辑和路由控制就能搞定，给你一步步拆解：

先把原来的_nav.ts当成模板，复制两份分别命名为admin-nav.ts和manager-nav.ts，然后各自修改成对应角色的导航菜单。比如：

admin-nav.ts示例：

export const AdminNav = [
  {
    name: '用户管理',
    url: '/admin/users',
    icon: 'icon-user'
  },
  {
    name: '系统设置',
    url: '/admin/settings',
    icon: 'icon-settings'
  }
];

manager-nav.ts示例：

export const ManagerNav = [
  {
    name: '订单管理',
    url: '/manager/orders',
    icon: 'icon-basket'
  },
  {
    name: '销售报表',
    url: '/manager/reports',
    icon: 'icon-chart'
  }
];

首先你需要一个能获取当前用户角色的方式——比如登录后把角色存在localStorage，或者用Angular服务来管理用户认证信息（推荐后者，更安全）。假设你有个AuthService，里面有getCurrentUserRole()方法返回角色（'admin'或'manager'）。

然后修改app-sidebar-nav.component.ts：

import { Component, OnInit } from '@angular/core';
import { AdminNav } from './admin-nav';
import { ManagerNav } from './manager-nav';
import { AuthService } from '../services/auth.service'; // 引入你的认证服务

@Component({
  selector: 'app-sidebar-nav',
  templateUrl: './app-sidebar-nav.component.html'
})
export class AppSidebarNavComponent implements OnInit {
  currentNav: any[]; // 用来存储当前角色对应的导航

  constructor(private authService: AuthService) {}

  ngOnInit() {
    const userRole = this.authService.getCurrentUserRole();
    // 根据角色赋值对应的导航数组
    if (userRole === 'admin') {
      this.currentNav = AdminNav;
    } else if (userRole === 'manager') {
      this.currentNav = ManagerNav;
    }
    // 这里可以加个默认情况，比如未登录时的导航或者提示
  }
}

原来的模板是循环_nav数组，现在改成循环currentNav：

<!-- app-sidebar-nav.component.html -->
<ul class="sidebar-nav">
  <li *ngFor="let item of currentNav" class="sidebar-nav-item">
    <a class="sidebar-nav-link" [routerLink]="[item.url]">
      <i class="{{item.icon}}"></i>
      <span>{{item.name}}</span>
    </a>
  </li>
</ul>

为了避免用户手动输入其他角色的路由，你可以用Angular的路由守卫CanActivate来限制访问：

创建一个RoleGuard：

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

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

  canActivate(route: ActivatedRouteSnapshot): boolean {
    const requiredRole = route.data.requiredRole;
    const userRole = this.authService.getCurrentUserRole();

    if (userRole === requiredRole) {
      return true;
    } else {
      // 角色不匹配时跳转到对应角色的首页或者404
      this.router.navigate([`/${userRole}`]);
      return false;
    }
  }
}

然后在路由配置里使用：

const routes: Routes = [
  {
    path: 'admin',
    component: AdminDashboardComponent,
    canActivate: [RoleGuard],
    data: { requiredRole: 'admin' }
  },
  {
    path: 'manager',
    component: ManagerDashboardComponent,
    canActivate: [RoleGuard],
    data: { requiredRole: 'manager' }
  }
];

用户登录成功后，根据角色直接跳转到对应的路由：

// 登录组件里的登录方法
login() {
  // 假设登录接口返回用户信息，包含role
  this.authService.login(username, password).subscribe(user => {
    if (user.role === 'admin') {
      this.router.navigate(['/admin']);
    } else if (user.role === 'manager') {
      this.router.navigate(['/manager']);
    }
  });
}

这样一套下来，不同角色登录后会自动跳转到自己的首页，同时导航栏也会加载对应的菜单，还能防止越权访问其他角色的路由。

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