Axios刷新令牌问题

Question

我正在使用React.useEffect((来检索用户列表。

React.useEffect(() => {
dispatch(UsersActions.creators.fetchingUsersAction());
UsersApi.methods.getUsers().then(
(res) => {
dispatch(UsersActions.creators.fetchUsersSuccessAction(res.data));
},
(e) => {
dispatch(UsersActions.creators.fetchUsersErrorAction());
}
);
}, [dispatch]);

在本例中，fetchingUsersAction用于设置"；加载"；设置为true，并将fetchUsersErrorAction设置为false。这很好，除非请求由于令牌过期而失败。

ApiClient.interceptors.response.use(
function (response) {
return response;
},
function (error) {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const refresh = JSON.stringify({
refreshToken: localStorage.getItem("refresh"),
});
AuthenticationApi.methods.refresh(refresh).then((res) => {
if (res.data.accessToken) {
localStorage.setItem("token", res.data.accessToken);
}
ApiClient.defaults.headers.common["Authorization"] =
"Bearer " + res.data.accessToken;
originalRequest.headers["Authorization"] =
"Bearer " + res.data.accessToken;
return ApiClient(originalRequest);
});
}
return Promise.reject(error);
}
);

这是发送一个生成新令牌的请求和前一个请求，但由于第一个请求失败，useEffect将转到错误部分，使"；加载"；false，并显示基于先前状态的用户列表。处理这个问题的最佳方法是什么？

感谢

Answer 1

您应该在useEffect钩子内创建一个异步函数，并使用await等待响应，然后调用该函数。这里有一个例子：

useEffect(() => {
const getRoles = async () => {
await authService.roles().then((res) => {
//Do your stuff.
console.log(res);
}).catch((error) => {
console.log(`'Catching the error: '${error}`);
});
};
//Call the recent created function.
getRoles();
}, []);

你的拦截弹在我看来不错。