如何进行反应axios拦截器设置，如果本地存储没有accessToken然后想要清除本地存储并导航用户登录？

Question

假设我正在创建一个React项目，并且在该项目中，我想设置Axios。对于 Axios 设置，我正在创建一个 Axios 拦截器文件，在每次 API 调用之前，我都会检查该域的本地存储是否没有 accessToken。在这种情况下，我只是希望清除该域的本地存储，并且用户应该导航回“/auth/login”。但是，由于这是一个单页应用程序（SPA），我不想使用 window.location.reload(); 刷新页面。或 window.location.href = '/auth/login'。

只需刷新页面，我想将用户导航回“身份验证/登录”

Answer 1

要使用 Axios 在 React 项目中处理此重定向而不刷新页面，您可以将 React Router 与 Axios 拦截器一起使用。

首先确保您的应用程序中已设置 React Router 以进行客户端路由。 创建 axios 拦截器并检查区域存储中是否缺少 accessToken。 使用 React Router 进行导航，无需刷新页面。

示例：

创建您的自定义挂钩：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

export const useAxiosInterceptor = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const axiosInterceptor = axios.interceptors.request.use(config => {
      const token = localStorage.getItem('accessToken');
      if (!token) {
        localStorage.clear();
        navigate('/auth/login');
      }
      return config;
    }, error => {
      // Handle error
      return Promise.reject(error);
    });

    return () => {
      axios.interceptors.request.eject(axiosInterceptor);
    };
  }, [navigate]);
};

然后在进行 API 调用的组件中使用此钩子。 有关 React Router 的更多信息，您可以在其官方网站上找到 https://reactrouter.com/en/main