我在React Project中使用Axios,并为我想要创建Axios实例并使用拦截器的错误编写一些通用代码。
以下是我的React Routes代码
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./scenes/Home";
import { ProtectedRoute } from "./_hoc/ProtectedRoute";
import Admin from "./scenes/Admin";
import Login from "./components/Auth/Login";
export default class Routes extends Component<any, any> {
render() {
return (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<ProtectedRoute exact path="/admin" component={Admin} />
</Switch>
</div>
);
}
}
以下是我的Axios实例的代码
import axios from "axios";
const axiosInstance = axios.create({
baseURL: `http://localhost:55266/api/`
});
axiosInstance.interceptors.request.use(request => {
if (request.url != "/Login/Authenticate") {
//TO DO
//request.headers["Authorization"] = "Bearer";
}
return request;
});
axiosInstance.interceptors.response.use(
response => {
if (
response.request.responseURL ==
response.config.baseURL + "Login/Authenticate"
) {
localStorage.setItem("TAGAuthToken", response.data.data.token);
//I DON'T WANT THIS PAGE TO GET RELOADED.
window.location.href = "/Admin";
}
return response;
},
error => {
return Promise.reject({ ...error });
}
);
export default axiosInstance;
我不想使用window.location重新加载页面,但希望通过历史记录进行导航。我不知道如何实现这一目标。
我在各种教程中看到的方式是,他们说使用路由器而不是Switch并使用历史记录v4库,然后我们可以在任何地方使用历史记录,但是我想坚持使用Switch而不是Router。
期待有价值的回应。
注意:我已经检查了帖子Programmatically navigate using react router,但这不能回答我的问题。我想从AxiosInstance文件导航。可以通过History NPM软件包来实现,但是需要使用Router,但是根据我的要求,我需要使用Switch