DEV Community
·
路由守卫中的 Angular 查询
💡
原文英文，约600词，阅读约需2分钟。
📝
内容提要
作者介绍了如何通过使用 `queryClient.fetchQuery` 和设置 `staleTime` 来优化权限请求，减少重复调用。权限请求被移至 `queryOptions`，并在路由守卫中使用异步函数检查权限，从而提高访问管理面板时的效率。文章强调了 `fetchQuery` 的优势。
🎯
关键要点
- 使用 queryClient.fetchQuery(...) 优化权限请求，返回数据为 Promise。
- 设置 staleTime 为非零值，以避免每次路由守卫都重新获取数据。
- 将权限请求移至 queryOptions 对象中，提高效率。
- 使用 fetchQuery 函数解决路由守卫中的权限检查问题。
- 路由守卫需要返回异步值，以处理缓存或需要重新获取的权限。
- 使用 fetchQuery 时，如果数据未失效，则返回缓存数据，否则获取最新数据。
- 不能使用 injectQuery(...) 或 injectQueryClient().getQuery(...)，因为它们不适合路由守卫。
❓
延伸问答
如何使用 Angular 的 fetchQuery 优化权限请求？
使用 queryClient.fetchQuery(...) 方法可以优化权限请求，返回数据为 Promise，避免重复调用。
为什么要设置 staleTime 为非零值？
设置 staleTime 为非零值可以避免每次路由守卫都重新获取数据，提高效率。
在路由守卫中如何检查权限？
在路由守卫中使用异步函数调用 queryClient.fetchQuery 来检查权限，确保返回的是最新数据。
为什么不能在路由守卫中使用 injectQuery(...)？
因为 injectQuery(...) 返回的数据在数据未获取前为 undefined，且在数据过期时会先发出过期数据。
如何将权限请求移至 queryOptions 中？
可以通过创建一个 permissionOptions() 方法，将权限请求的配置移至 queryOptions 对象中，以提高效率。
使用 fetchQuery 时如何处理缓存数据？
使用 fetchQuery 时，如果数据未失效，则返回缓存数据；否则获取最新数据。
➡️
