Блог

Мне нужно проверить аутентификацию перед рендерингом приложения

я запускаю действие в index.js вот так:

 import ReactDOM from 'react-dom';
import "bootstrap/dist/css/bootstrap.css";
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store/index';
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom';
import {authCheckStaut} from './store/actions/auth'

store.dispatch(authCheckStaut());

ReactDOM.render(
  <Provider store={store}>
  <BrowserRouter basename="/">
    <App />
  </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();
 

и это страница приложения:

 import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, Switch, withRouter} from "react-router-dom";
import PrivateRoute from './routes/compoments/PrivateRoute'
import * as actions from '../src/store/actions/auth';




const Login = lazy(() => import("./users/components/login"));

const Signup = lazy(() => import("./users/components/signup"));

const Dashboard = lazy(() => import("./users/components/dashboard"));

const App = (props)=> {

    return (
      <Router>
        <Suspense fallback={<h1>Loading...</h1>}>
          <Switch>
              <Route exact path="/login" component={Login} />
              <Route exact path="/signup" component={Signup} />             
              <PrivateRoute exact path="/" component={Dashboard} auth={props.currentUser} />
          </Switch>
        </Suspense>
      </Router>
    );
  }


const mapStateToProps = state => ({ currentUser: state.auth });
export default withRouter(connect(mapStateToProps, actions)(App));
 

и это страница PrivetRoute:

 import {Route, Redirect} from 'react-router-dom';

const PrivateRoute = ({component:Component,auth,...rest}) => {
    return (
    <Route 
        {...rest}
        render = {props =>{
            console.log('PR',auth)
            if(!auth.isAuthenticated){
                return <Redirect to={{
                    pathname: '/login',
                    state: { from: props.location }
                }}/>
            } else {
                return <Component {...props}/>
            }

        }}
    />
)};
  
export default PrivateRoute;
 

Я сделал несколько консольных журналов для отслеживания моего приложения

журналы консоли

как вы можете видеть, он обновляет состояние хранилища после рендеринга приложения, поэтому оно всегда будет перенаправляться на логин, даже если это действительный токен

React всегда отображает текущее состояние вашего приложения. Вам нужно некоторое начальное состояние, в котором вы будете ждать ответа. Прямо сейчас ваш переход состояния выглядит следующим образом:

То, что вы хотите, это три состояния, например:

Как читать схемы:

Стрелка из ниоткуда указывает на «начальное» состояние. Состояния находятся в блоках. Стрелки от окна к окну — это переходы. Рядом со стрелками указаны названия переходов (событий). В квадратных скобках указано «условие» (или защита перехода). Переход произойдет, только если условие истинно.