AnalogJS中路由守卫注入依赖的注意事项

在Angular和AnalogJS应用中，路由守卫(CanActivateFn)是实现权限控制的重要机制。然而，在使用依赖注入时，开发者可能会遇到一些意料之外的行为，特别是在异步操作中。

问题现象

当开发者在路由守卫中使用inject()函数获取依赖时，如果该守卫包含异步操作（如async/await），可能会遇到"inject() must be called from an injection context"错误。这种情况并非AnalogJS特有的问题，而是Angular框架本身的限制。

根本原因

Angular的依赖注入机制要求在组件或服务实例化期间完成所有依赖注入操作。当我们在异步函数中使用inject()时，特别是位于await之后的代码，实际上已经进入了下一个浏览器宏任务(macrotask)的执行阶段，此时Angular的注入上下文已经不可用。

解决方案

要解决这个问题，开发者需要确保所有依赖注入操作在异步操作之前完成。具体做法是：

1. 在异步操作前先获取所有需要的依赖
2. 将这些依赖保存在局部变量中
3. 然后在异步操作中使用这些变量

export const AuthGuard: CanActivateFn = async () => {
  // 在异步操作前获取所有依赖
  const router = inject(Router);
  const supabaseService = inject(SupabaseService);
  
  // 然后执行异步操作
  const session = await supabaseService.getSession();

  if (!session.data.session) {
    router.navigate(["/auth"]);
    return false;
  }

  return true;
};

最佳实践

1. 依赖前置原则：始终在异步操作前完成所有依赖注入
2. 单一职责：考虑将复杂的业务逻辑提取到服务中，保持守卫简洁
3. 错误处理：为异步操作添加适当的错误处理机制
4. 性能考虑：避免在守卫中执行耗时操作，以免影响用户体验

总结

理解Angular依赖注入上下文的工作机制对于编写可靠的路由守卫至关重要。通过遵循"依赖前置"原则，开发者可以避免常见的注入上下文错误，同时保持代码的清晰和可维护性。这一原则不仅适用于路由守卫，也适用于其他需要依赖注入的异步场景。