我在以Django为后端的reactJS中使用JWT令牌进行身份验证。当刷新令牌过期时,Axios将用作拦截器,它将页面的URL更改为/account/login
。但是,react-router不会呈现登录页面。
这是我的拦截器的代码: axios.js文件
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
axios.interceptors.response.use((response) => {
return response
}, function (error) {
const originalRequest = error.config;
if (error.response.status === 401 && originalRequest.url.includes('/api/token/refresh/')) {
console.log('101')
history.replace('/account/login/')
store.dispatch(actionCreator.setAuthFalse());
return Promise.reject(error);
}
这是我的路线的代码:
在App.js中
<Suspense fallback={<Loader/>}>
<BrowserRouter>
<Fragment>
<Navbar/>
<Switch>
<Route exact path='/service/' component={AllServices}/>
<Route exact path='/article/' component={Article}/>
<Route exact path='/account/login/' component={LoginPage} />
</Switch>
</Fragment>
</BrowserRouter>
</Suspense>
const mapStateToProps = state => {
return {
accessToken: state.accessToken,
refreshToken: state.refreshToken,
expiresIn: state.expiresIn,
isAuthenticated: state.isAuthenticated
}
}
const mapDispatchToProps = dispatch => {
return{
auth_user_after_refresh: (refreshToken) => dispatch(authActions.getAnotherAccessToken(refreshToken)),
logout: () => dispatch(authActions.logoutUser())
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
如何确保URL更改时组件能够呈现?