React router v6 如何使用“navigate”。axios拦截器

Question

React 路由器 v6 如何使用navigate. axios拦截器

互联网上有很多例子。但怎样做才是正确的呢？如果可以的话，请提供详细的描述。谢谢！

import axios from 'axios'

export const HTTP = axios.create({
    baseURL: "http://URL.ru/",
    headers: {
        "content-type": "application/json",
    },
})

HTTP.interceptors.response.use(response => response, error => {
    if (error.response.status === 401) {
        //navigate('/login')
    }
    return Promise.reject(error)
})

Answer 1

如果您将拦截器包装在功能组件中并在 app.js 中初始化它，则可以向下导航拦截器

首先，让我们创建一个函数来充当我们的 Promise 拦截器，它应该将导航作为其参数

const AxiosInterceptorsSetup = navigate => {
    HTTP.interceptors.response.use(
        response => response,
        error => {
            if (error.response.status === 401) {
                navigate('/login');
            }
            return Promise.reject(error);
        }
    );
};

export default AxiosInterceptorsSetup;

现在我们需要在 app.js 中创建将使用AxiosInterceptorsSetup的功能组件

function AxiosInterceptorNavigate() {
    let navigate = useNavigate();
    AxiosInterceptorsSetup(navigate);
    return <></>;
}


function App(props) {
   return (
       <BrowserRouter>
           {<AxiosInterceptorNavigate />}
            {...}
           </Routes>
       </BrowserRouter>
   );
}