即使URL发生更改,React Router也不会呈现组件

时间:2020-02-13 05:31:03

标签: reactjs react-router axios

我在以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更改时组件能够呈现?

0 个答案:

没有答案