reactjs中axios拦截器在哪里添加
2019-11-13
6655
我正在构建一个 React 应用。我想在 token 过期时重定向到登录。我可以使用 axios 拦截器来实现这一点。我将其添加到 App.js 中,如下所示。
class App extends Component {
constructor(props) {
super(props)
axios.interceptors.response.use((response) => {
if (response.status === 401) {
console.log("You are not authorized");
//redirect
}
return response;
}, (error) => {
if (error.response && error.response.data) {
return Promise.reject(error.response.data);
}
return Promise.reject(error.message);
});
}
render() {
return (
<BrowserRouter>
<Layout>
<Switch>
<PRoute path="/incident-reporting" component={Home}></PRoute>
<RRoute exact={true} path="/" component={Login}></RRoute>
<NFound></NFound>
</Switch>
</Layout>
</BrowserRouter>
);
}
}
但它没有按预期工作。我没有使用钩子。我想知道在 reactjs 中在哪里添加拦截器。
1个回答
您可以创建一个拦截器文件,并在想要使用
axios
时包含该文件
import axios from 'axios';
const axiosInterceptor = axios.interceptors.response.use((response) => {
if (response.status === 401) {
console.log("You are not authorized");
//redirect
}
return response;
}, (error) => {
if (error.response && error.response.data) {
return Promise.reject(error.response.data);
}
return Promise.reject(error.message);
});
export default axiosInterceptor;
并在您的组件中
import axiosInterceptor from './utils/axiosInterceptor.js'
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
<BrowserRouter>
<Layout>
<Switch>
<PRoute path="/incident-reporting" component={Home}></PRoute>
<RRoute exact={true} path="/" component={Login}></RRoute>
<NFound></NFound>
</Switch>
</Layout>
</BrowserRouter>
);
}
}
ma_dev_15
2019-11-13