我的React应用程序的结构如下:
const root = ReactDOMClient.createRoot(document.getElementById('root'));root.render(
<Provider store={store}>
<BrowserRouter>
<AuthProvider>
<Routes />
</AuthProvider>
</BrowserRouter>
</Provider>
- 我有一个Redux商店服务于整个应用程序(使用Thunks通过API请求与服务器通信并更新商店)
- 然后,我有一个AuthProvider上下文来处理身份验证功能(使用AWS Cognito库)
现在我想将所有API请求抽象为一个Axios示例,使用拦截器来处理令牌刷新。
const apiClient = axios.create({
baseURL: API_BASE_URL,
headers: {
accept: 'application/json'
}
});
apiClient.interceptors.response.use(
(response) => {
return response;
},
async (error) => {
const originalRequest = error.config;
if (error.response.status === 403 && !originalRequest.retry) {
originalRequest.retry = true;
// Will need to do a refresh
const access_token = await refreshToken();
return apiClient(originalRequest);
}
throw error;
}
);
export default apiClient;
问题:如何实现refreshToken()
调用,因为它已经是useAuth()
钩子的一部分了?
我无法从Axios示例访问useAuth()
钩子,因为它不是React Functional组件,而且我无法将它放入Axios上下文(如useAxios()
),因为它需要成为Redux存储的父级(这意味着,同样,它无法访问useAuth()
钩子)。
我相信这不是一个罕见的问题,一个必须有一个优雅的解决方案-但我似乎找不到一个。
任何建议都很感谢
1条答案
按热度按时间uinbv5nw1#
所以,我有一个“变通办法”,而不是一个解决方案,但仍然会赞赏任何建议的标准方式来实现这一点。
我的解决方案是从AuthProviderx 1c 0d1x中初始化axios示例的拦截器
在我的AuthProvider中,我可以访问AWS Cognito函数
refreshSession()
以及.getIdToken().getJwtToken()
,以便立即重试。作品-不确定这是最优雅的解决方案。