英文:
How can I return children prop in react only after my useEffect code runs. (synchronous behaviour)
问题
我正在尝试为我的axios请求创建一个拦截器包装器，以处理JWT令牌。
我想要的是先在useEffect块内运行拦截器代码，然后返回children，以便children带着新的访问令牌返回，最终完成成功的API调用。但是实际上我得到的是，它返回的是旧的JWT令牌，并且API调用会使用过期的令牌导致错误。
我还尝试添加一个状态，如下：
const [isSet, setIsSet] = useState<boolean>(false);// ...setIsSet(true)// ...return isSet && children;
但是 TypeScript 不允许我这样做。
如何解决这个问题？
英文:
I am trying to create axios interceptor wrapper for my axios request to handle JWT tokens.
What I want is to run the interceptor code first inside the useEffect block and then return children so that the children returns with new access token and eventually a successfull api call. but instead what I am getting is, it is returning with the old jwt token and the api call happens with an expired token resulting to an error.
const AxiosPrivateInterceptor: FC<IProps> = ({ children }) => {const { user } = useAppSelector(selectAuthUser);const refresh = useRefreshToken();useEffect(() => {const requestIntercept = axiosPrivate.interceptors.request.use((config: AxiosRequestConfig) => {config.headers = config.headers ?? {};if (!config?.headers["Authorization"]) {config.headers["Authorization"] = `Bearer ${user?.accessToken}`;}return config;},(error) => Promise.reject(error));const responseIntercept = axiosPrivate.interceptors.response.use((response) => response,async (error) => {const prevRequest = error?.config;if (error?.response.status === 403 && !prevRequest?.sent) {prevRequest.send = true;const newToken = await refresh();const accessToken = newToken.accessToken;prevRequest.headers["Authorization"] = `Bearer ${accessToken}`;return axiosPrivate(prevRequest);}return Promise.reject(error);});return () => {axiosPrivate.interceptors.request.eject(requestIntercept);axiosPrivate.interceptors.response.eject(responseIntercept);};}, [user, refresh]);return children;};I also tried to add a state like this :const AxiosPrivateInterceptor: FC<IProps> = ({ children }) => {const { user } = useAppSelector(selectAuthUser);const refresh = useRefreshToken();const [isSet, setIsSet] = useState<boolean>(false);useEffect(() => {const requestIntercept = axiosPrivate.interceptors.request.use((config: AxiosRequestConfig) => {config.headers = config.headers ?? {};if (!config?.headers["Authorization"]) {config.headers["Authorization"] = `Bearer ${user?.accessToken}`;}return config;},(error) => Promise.reject(error));const responseIntercept = axiosPrivate.interceptors.response.use((response) => response,async (error) => {const prevRequest = error?.config;if (error?.response.status === 403 && !prevRequest?.sent) {prevRequest.send = true;const newToken = await refresh();const accessToken = newToken.accessToken;prevRequest.headers["Authorization"] = `Bearer ${accessToken}`;return axiosPrivate(prevRequest);}return Promise.reject(error);});setIsSet(true)return () => {axiosPrivate.interceptors.request.eject(requestIntercept);axiosPrivate.interceptors.response.eject(responseIntercept);};}, [user, refresh]);return isSet && children;};But typescript won't allow me to do that.
How this issue can be solved?
答案1
得分: 1
虽然这没有解决我的主要问题，但我发现绕过这个 TypeScript 错误相当容易：
return <>{isSet && children}</>;
英文:
Although this did not fix my main issue, but I figured out that it's quite easy to bypass this typescript error:
return <>{isSet && children}</>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论