Question

我在实现我的应用程序身份验证的后端上有带有护照.js的React和Node.js。我的react会调用我的后端，并通过动作减少器来获取授权用户。一切正常，但路由卫士出现问题。如果用户未登录，这就是我保护路由的方式

if（！this.props.auth）返回

问题是，当用户登录时，如果刷新页面，则上面的代码执行的速度比mapStateToProps返回授权用户的速度要快，并且已登录的用户将被重定向到索引页面。这是糟糕的用户体验。请帮助我如何解决此问题，我们将不胜感激。

我认为我需要做的是确保在呈现DOM之前先更新存储，但是我不确定该怎么做。

这是仪表板

 class Dashboard extends Component {
 render() {
 if(!this.props.auth) return <Redirect to='/' /> 
 if (!this.props.auth.googleUsername) {
  return <div className='container'> Loading ... </div>;
} else {
  return (
    <div className='container' style={{ margin: '10px 10px' }}>
       {this.props.auth.googleUsername}
    </div>
    );
}
 function mapStateToProps({auth}) {
 return {auth};
}
 export default connect(mapStateToProps)(Dashboard);

这是App.js

import { connect } from 'react-redux';
import { fetchUser } from './store/actions/index';
import Home from './components/layout/Home';
import Dashboard from './components/layout/Dashboard';

 class App extends Component {

  componentDidMount() {
  this.props.fetchUser();
   } 
    render() {
   return (
    <div>
     <BrowserRouter>
      <div>
        <Header />
        <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/dashboard' component={Dashboard} />
        </Switch>
      </div>
    </BrowserRouter>
    </div>
    );
  }
 }
  export default connect(null,{ fetchUser })(App)

减速器

  import axios from 'axios';
  import { FETCH_USER } from './types';
  export const fetchUser =  () => async dispatch => {
  const res = await axios.get('/api/current_user');
  dispatch({ type: FETCH_USER, payload: res.data });
  };

Auth Reducer

 import { FETCH_USER } from '../actions/types';
 export default function(state = false, action) {
 switch (action.type) {
    case FETCH_USER:
      return action.payload;
  default:
  return state;
  }
 }

Answer 1

对于那些遇到此问题的人，我设法解决了可能的问题。问题是我需要在整个应用程序中持久保存redux存储。我使用了一个名为'redux-persist'的第三方库

这是我在index.js中使用的集合

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
import { PersistGate } from 'redux-persist/integration/react';

const persistConfig = {
key: 'root',
storage,
}
   const persistedReducer = persistReducer(persistConfig, rootReducer)
   const store = createStore(persistedReducer, applyMiddleware(thunk));
   const persistor = persistStore(store);

  ReactDOM.render(
    <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <App />
     </PersistGate>
    </Provider>,
   document.getElementById('root'));

如何结合后端的反应路由器和通行证有效地保护路线

1 个答案: