Частный маршрут React Router и Redux - PullRequest
Новая
       60

Частный маршрут React Router и Redux

0 голосов
/ 29 апреля 2020

Я пытаюсь создать простое приложение React с потоком аутентификации и приватным маршрутом. Сначала я проверяю, вошел ли пользователь и перенаправил ли он его, чтобы указать личный маршрут, но после того, как приложение перешло на приватный маршрут, оно не У меня есть информация о пользователе, вот мой код:

Приложение. Js

class App extends Component {

componentDidMount() {
    this.props.fetchUser();
}

render() {
console.log('AUTH:' , this.props.signedIn);
return (
  <div>
    <BrowserRouter>
      <Switch>
          <Route exact path="/" render={() => <Redirect to={this.props.signedIn ? '/dashboard' : '/login'}/>}/>
          <Route exact path="/login" component={Login} />
          <PrivateRoute exact path="/dashboard" ><DashboardLayout/></PrivateRoute>
      </Switch>
    </BrowserRouter>
  </div>
);
  }
 }

const mapStateToProps = state => ({
    signedIn: state.auth.signedIn
});
const mapDispatchToProps = dispatch => ({
    fetchUser: () => dispatch(fetchUser())
});
export default connect(mapStateToProps, mapDispatchToProps)(App);

PrivateRoute. js

const PrivateRoute = ({children, signedIn, ...rest}) => {


const checkToken = (location) => {

    console.log("SignedIn", signedIn);
    if(signedIn) {
        return children;
    }
    else {
        return <Redirect to={{pathname: '/login', state: {from : location}}}/>
    }

};

return <Route
    {...rest}
    render={({location}) => checkToken(location)}
/>;
};

const mapStateToProps = state => ({
    signedIn: state.auth.signedIn
});


export default connect(mapStateToProps, null)(PrivateRoute)

Итак, в моей консоли Google, Я вижу, что для моего журнала консоли AUTH установлено значение false из приложения. js, а также для входа в консоль журнала установлено значение false, но после повторного отображения для моего журнала консоли AUTH из приложения установлено значение True, но не go снова в PrivateRoute Google Console

1 Ответ

1 голос
/ 04 мая 2020

Я использую 3 возврата для PrivateRoute

  • children - для авторизованных пользователей
  • Redirect для входа в систему - для не авторизованных пользователей
  • и некоторого LoadingComponent - для ожидания выборка пользователя

Мы подготовили список компонентов загрузки с различной структурой заполнителей, они выглядят как заполнители в YouTube при загрузке страницы 

const PrivateRoute = ({children, signedIn, isAuthReady, customPlaceholder, ...rest}) => {
  return (
    <Route {...rest} render={(location) => {
      if (!isAuthReady) {
        return customPlaceholder || <Placeholder /> 
      }

      if (signedIn) {
        return children;
      }

      return <Redirect to={{pathname: '/login', state: {from : location}}} />
    }} />
  )
}

const mapStateToProps = state => ({
  signedIn: state.auth.signedIn,
  isAuthReady: state.auth.isAuthReady
});

export default connect(mapStateToProps)(PrivateRoute)
...