如何使用React + ReactQuery + Axios堆栈创建全局401未自授权处理程序？

Question

因此，我设计了前端，它封装了绑定到自定义钩子中的单个资源的每个API操作，如下所示：

export default function useSubjects() {
  const queryClient: QueryClient = useQueryClient();
  const token: string | null = useStore((state) => state.user.token);
  const { yearCourseId } = useParams<{ yearCourseId: string }>();

  const getSubjects = async () => {
    const response = await axios.get(`yearCourses/${yearCourseId}/subjects`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  };

  const postSubject = async (subject: SubjectType) => {
    const response = await axios.post(`yearCourses/${yearCourseId}/subjects`, subject, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return response.data;
  };

  const query = useQuery(SUBJECTS_QUERY_KEY, getSubjects);

  const postMutation = useMutation(postSubject, {
    onSuccess: (subject: SubjectType) => {
      queryClient.setQueryData(SUBJECTS_QUERY_KEY, (old: any) => [...old, subject]);
    },
  });

  return { query, postMutation };
}

那么，如何在全球范围内处理401 unauthorized呢？我想导航用户到/login对每个未经授权的请求。注意，我有更多类似于其他资源的钩子。

Answer 1

使用onError回调。您也可以作为queryCache的回调来全局执行此操作。

const queryClient = new QueryClient({
 queryCache: new QueryCache({
   onError: error => {
     // check for 401 and redirect here
   }
 })
})