Angular 5多条件路由：基于输入变量的AuthGuard实现问询

嘿，我来帮你搞定Angular 5里的多条件路由守卫问题！结合你的需求，我们可以通过路由自定义数据+守卫逻辑判断的方式实现基于输入变量的多条件路由控制，具体方案如下：

1. 完善你的AuthGuard守卫类 #

首先补全你的AuthGuardService，实现CanActivate接口，通过注入的AuthService获取用户状态，再结合路由传入的条件参数做判断：

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

@Injectable()
export class AuthGuardService implements CanActivate {

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 从路由配置中提取自定义条件参数（这就是你要的"输入变量"）
    const requireLogin = route.data['requireLogin'] as boolean;
    const allowedRoles = route.data['allowedRoles'] as string[];
    const needEmailVerified = route.data['needEmailVerified'] as boolean;

    // 条件1：判断是否需要登录，且用户是否已登录
    if (requireLogin && !this.authService.isUserLoggedIn()) {
      // 未登录则跳转到登录页，携带返回地址
      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
      return false;
    }

    // 条件2：判断用户角色是否在允许列表内（如果配置了角色要求）
    if (allowedRoles && allowedRoles.length > 0) {
      const currentUserRoles = this.authService.getCurrentUserRoles();
      const hasPermission = allowedRoles.some(role => currentUserRoles.includes(role));
      if (!hasPermission) {
        // 无权限则跳转到无权限页面
        this.router.navigate(['/unauthorized']);
        return false;
      }
    }

    // 条件3：判断用户是否完成邮箱验证（可根据需求扩展）
    if (needEmailVerified && !this.authService.isEmailVerified()) {
      this.router.navigate(['/verify-email']);
      return false;
    }

    // 所有条件满足，允许访问路由
    return true;
  }
}

2. 配置带条件参数的路由 #

在你的路由配置文件中，给需要控制的路由添加data字段，传入对应的条件变量，守卫会自动读取这些参数做判断：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AdminPanelComponent } from './admin-panel/admin-panel.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { AuthGuardService } from './auth-guard.service';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: 'admin', 
    component: AdminPanelComponent,
    canActivate: [AuthGuardService],
    data: {
      requireLogin: true, // 需要登录
      allowedRoles: ['admin', 'super-admin'], // 仅管理员和超级管理员可访问
      needEmailVerified: true // 要求邮箱已验证
    }
  },
  { 
    path: 'profile', 
    component: UserProfileComponent,
    canActivate: [AuthGuardService],
    data: {
      requireLogin: true, // 需要登录
      allowedRoles: [], // 所有登录用户都可访问
      needEmailVerified: false // 不需要邮箱验证
    }
  },
  // 其他路由配置...
];

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

3. 扩展更多自定义条件 #

你可以根据业务需求随意添加新的条件：

• 比如判断用户是否是付费会员：在data里加requirePaidMember: true，然后在守卫里增加this.authService.isPaidMember()的判断
• 比如判断用户所在地区：添加allowedRegions: ['CN', 'US']，然后在守卫里校验用户地区是否匹配

只要在路由data中定义参数，再在守卫里对应增加判断逻辑即可，非常灵活。

注意：确保你的AuthServiceService中已经实现了isUserLoggedIn()、getCurrentUserRoles()、isEmailVerified()这些方法，根据你的实际业务逻辑返回对应状态。

内容的提问来源于stack exchange，提问作者Kaki Master Of Time