Angular11结合Laravel8实现按登录用户角色重定向对应仪表板

1. 后端接口适配（Laravel端） #

首先确保登录接口返回的响应中携带用户角色信息，基于Spatie Permission扩展可以直接调用内置方法获取角色：

// 登录接口逻辑示例，位于App\Http\Controllers\Auth\LoginController
public function login(Request $request)
{
    $credentials = $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);

    if (!Auth::attempt($credentials)) {
        return response()->json(['message' => '账号密码错误'], 401);
    }

    $user = Auth::user();
    $token = $user->createToken('HRM-Auth-Token')->accessToken;

    return response()->json([
        'access_token' => $token,
        'token_type' => 'Bearer',
        // 单角色场景直接取第一个角色即可，多角色场景返回完整数组
        'role' => $user->getRoleNames()->first()
    ]);
}

后端建议同步给各个仪表板对应的接口加上role:对应角色的中间件校验，避免前端权限被绕过的安全风险

2. 认证服务逻辑调整（authentication.service） #

新增角色存储、读取能力，和原有登录、退出逻辑打通：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  constructor(private http: HttpClient, private router: Router) {}

  // 原有登录方法扩展存储角色逻辑
  login(credentials: {email: string, password: string}) {
    return this.http.post('你的后端登录接口地址', credentials).pipe(
      tap((res: any) => {
        localStorage.setItem('access_token', res.access_token);
        localStorage.setItem('user_role', res.role);
      })
    );
  }

  // 新增获取用户角色方法
  getUserRole(): string {
    return localStorage.getItem('user_role') || '';
  }

  // 原有退出方法扩展清除角色缓存逻辑
  logout() {
    localStorage.removeItem('access_token');
    localStorage.removeItem('user_role');
    this.router.navigate(['/login']);
  }

  // 原有登录状态判断方法
  isLoggedIn(): boolean {
    return !!localStorage.getItem('access_token');
  }
}

3. 登录页跳转逻辑实现（login.component） #

新增角色与路由的映射表，登录成功后自动匹配跳转目标：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthenticationService } from './authentication.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  loginForm: FormGroup;
  // 角色-路由映射表，后续新增角色仅需修改此处即可
  private roleRouteMap: Record<string, string> = {
    admin: '/admin-dashboard',
    hod: '/hod-dashboard',
    supervisor: '/supervisor-dashboard',
    staff: '/staff-dashboard'
  }

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

  onSubmit() {
    if (this.loginForm.valid) {
      this.authService.login(this.loginForm.value).subscribe({
        next: () => {
          const userRole = this.authService.getUserRole();
          // 匹配不到角色时默认跳转到员工仪表板，可按需调整
          const targetRoute = this.roleRouteMap[userRole] || '/staff-dashboard';
          this.router.navigate([targetRoute]);
        },
        error: () => {
          // 自行实现登录失败提示逻辑
          alert('登录失败，请检查账号密码');
        }
      })
    }
  }
}

4. 路由守卫权限控制（auth-guard.service） #

新增路由访问权限校验，避免用户手动输入地址跨角色访问仪表板：

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

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  // 路由-允许访问角色映射表，可按需配置跨角色访问权限，比如允许admin访问所有仪表板
  private routePermissionMap: Record<string, string[]> = {
    'admin-dashboard': ['admin'],
    'hod-dashboard': ['hod', 'admin'],
    'supervisor-dashboard': ['supervisor', 'hod', 'admin'],
    'staff-dashboard': ['staff', 'supervisor', 'hod', 'admin']
  }
  private roleRouteMap: Record<string, string> = {
    admin: '/admin-dashboard',
    hod: '/hod-dashboard',
    supervisor: '/supervisor-dashboard',
    staff: '/staff-dashboard'
  }

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 未登录直接跳登录页
    if (!this.authService.isLoggedIn()) {
      this.router.navigate(['/login']);
      return false;
    }

    const userRole = this.authService.getUserRole();
    const currentRoute = state.url.split('/')[1];
    const allowedRoles = this.routePermissionMap[currentRoute] || [];

    // 有权限直接放行
    if (allowedRoles.includes(userRole)) {
      return true;
    }

    // 无权限跳转到用户对应角色的仪表板
    this.router.navigate([this.roleRouteMap[userRole] || '/login']);
    return false;
  }
}

5. 路由配置绑定守卫 #

在路由模块给所有仪表板路由绑定AuthGuard即可：

// app-routing.module.ts 核心配置示例
const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'admin-dashboard', component: AdminDashboardComponent, canActivate: [AuthGuard] },
  { path: 'hod-dashboard', component: HodDashboardComponent, canActivate: [AuthGuard] },
  { path: 'supervisor-dashboard', component: SupervisorDashboardComponent, canActivate: [AuthGuard] },
  { path: 'staff-dashboard', component: StaffDashboardComponent, canActivate: [AuthGuard] },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

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