探秘Angular路由中的CanMatch接口（2024）

探索Angular 17+中Angular Router的CanMatch接口。 使用Angular 17+中的角色和动态条件保护路由的安全。（图片来源：Astrit Shuli）

Angular的路由系统提供了强大的功能来管理应用程序中的导航。路由模块的一个关键特性是能够实现守卫，以控制路由是否可以被激活或匹配。Angular 17中引入了CanMatch接口，允许开发人员根据特定条件判断某个路由是否可以匹配。

在这篇文章中，我们将深入了解 CanMatch 接口，如何实现这个接口，并通过实际例子来展示它的用法。

CanMatch 接口是 Angular 路由机制中的一个组件，它支持条件路由匹配。它提供了一种定义守卫逻辑的方式，在路由器尝试激活路由之前运行。如果所有 CanMatch 守卫都返回 true 的话，路由器将继续导航到该路由。如果有任何一个守卫返回 false 的话，该路由将被跳过匹配，路由器将转而评估其他路由配置。

以下为 CanMatch 接口的定义：

    interface CanMatch {  
      // 用于检查路由是否匹配的函数
      canMatch(route: Route, segments: UrlSegment[]): 可能是异步的<GuardResult>;
    }

• **route**：表示正在匹配的路由部分。
• **segments**：一个包含当前导航路径的 URL 段对象数组。
• **MaybeAsync <GuardResult>**：此返回类型可以是布尔值或解析为布尔值的 Promise 或 Observable，表示是否可以匹配该路由。

在这里，我们定义了一个函数来检查用户是否有任何所需的角色。这使我们能够根据用户的角色来控制对不同组件的访问权限。

    // 定义一个判断用户是否有特定角色的函数
    const hasRole = (roles: string[]): boolean => {  
      // 从认证服务中注入角色流，并映射用户角色到包含指定角色的用户角色检查
      return inject(AuthService).roles$.pipe(  
        map((userRoles) => userRoles.some((userRole) => roles.includes(userRole)))  
      );  
    };  

    // 导出路由配置
    export const routes: Routes = [  
      {  
        path: 'dashboard',  
        children: [  
          {  
            path: 'admin',  
            // 角色匹配函数，判断用户是否有 admin 或 manager 角色
            canMatch: [() => hasRole(['admin', 'manager'])],  
            // 加载组件函数，加载管理员仪表板组件
            loadComponent: () => import('./admin-dashboard.component'),  
          },  
          {  
            path: 'user',  
            // 角色匹配函数，判断用户是否有 user 角色
            canMatch: [() => hasRole(['user'])],  
            // 加载组件函数，加载用户仪表板组件
            loadComponent: () => import('./user-dashboard.component'),  
          },  
        ],  
      },  
    ];

在这个例子中，我们根据当前登录的用户的角色来保护一个组件，而该角色是动态获取的。

const 有角色 = (角色: string): boolean => {  
  return 注入(AuthService).角色$.pipe(  
    映射((用户角色) => 用户角色.includes(角色))  
  );  
};  

导出 const 路由: 路由[] = [  
  {  
    路径: '个人资料',  
    可匹配: [() => 有角色(注入(UserService).获取当前用户().角色)],  
    加载组件: () => 导入('./profile.component'),  
  },  
];

下面这个例子说明了如何根据用户的角色和特定的权限来保护设置模块的安全性。

const hasRoleAndPermission = (role: string, permission: string): boolean => {  
  return inject(AuthService).roles$.pipe(  
    map((userRoles) => userRoles.includes(role) && inject(PermissionService).hasPermission(permission))  
  );  
};  

export const routes: 路由配置 = [  
  {  
    path: '设置页面',  
    canMatch: [() => hasRoleAndPermission('admin', 'manageSettings')],  
    loadComponent: () => import('./settings.component'),  
  },  
];

在这种情况下，我们根据用户的角色以及从URL中获取的查询参数来保护文档详情部分的安全。

const hasRoleAndQueryParam = (角色: string, 参数名: string, 参数值: string): boolean => {  
  return inject(认证服务).角色$.pipe(  
    map((用户角色) => 用户角色.includes(角色) && inject(激活路由).snapshot.paramMap.get(参数名) === 参数值)  
  );  
};  

export const 路由: 路由配置 = [  
  {  
    路径: 'documents/:id',  
    canMatch: [() => hasRoleAndQueryParam('editor', 'documentType', 'private')],  
    加载组件: () => import('./document-detail.component'),  
  },  
];

示例 5：基于自定义保护规则保护组件的安全

在这里我们实现了一个自定义的 guard 类来保护管理员面板组件的 guard 类，实现了 CanMatch 接口的功能。

    @Injectable({ providedIn: 'root' })  
    export class MyCustomGuard implements CanMatch {  
      canMatch(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {  
        return inject(AuthService).roles$.pipe(  
          map((userRoles) => userRoles.includes('管理员'))  
        );  
      }  
    }  

    export const routes: Routes = [  
      {  
        path: '管理面板',  
        canMatch: [MyCustomGuard],  
        loadComponent: () => import('./admin-panel.component'),  
      },  
    ];

最后来总结一下

Angular Router中的CanMatch接口提供了一种强大的机制，可以根据自定义逻辑控制路由匹配。通过实现各种守卫，您可以创建符合应用需求的细粒度访问控制功能。这些示例展示了如何基于用户角色、权限、查询参数和自定义逻辑保护路由，从而增强Angular应用的安全性和易用性。

在探索 Angular 17 的过程中，可以考虑使用 CanMatch 接口实现强大的路由保护，以增强应用程序的导航体验。祝编码顺利！

感谢你加入__In Plain English_社区！在你离开之前，还有件事想和你说：

• 记得为作者鼓掌👏️并关注她
• 关注我们：X | LinkedIn | YouTube | Discord | Newsletter | 播客节目
• 在Differ上免费创建一个由AI驱动的博客吧！
• 更多精彩内容请访问 PlainEnglish.io