Чистый способ перенаправления пользователя, который не вошел в систему с помощью React?

Question

Думаю, я всегда мог бы добавить логин в WillTransitionTo, который сделал бы вызов в магазин через Redux, чтобы проверить, что пользователь вошел в систему, но это кажется немного взломанным, тем более, так как я должен добавить логику WillTransitionTo() к каждому компоненту.

У кого-нибудь есть идеи? Я собираюсь работать над подключением чего-то к isAuthorized с помощью onEnter.

Это корневой корень приложения, который выполняет подключение к ответному маршрутизатору.

реагируют-маршрутизатор: 2.0.4

реагируют: 15.0.2

const store = configureStore(); 


function isAuthorized() { 

} 

render(
    <Provider store={store}> 
    <Router history={browserHistory}> 

     <Route path="/" component={Application} onEnter={isAuthorized}> 
      <IndexRoute component={DashboardPage} /> 
      <Route path="login" component={LoginPage} /> 
      <Route path="dashboard" component={DashboardPage} /> 
      <Route path="items" component={DashboardPage} /> 
      <Route path="item-categories" component={DashboardPage} /> 
      <Route path="modifiers" component={DashboardPage} /> 
      <Route path="taxes" component={DashboardPage} /> 
      <Route path="discounts" component={DashboardPage} /> 
      <Route path="orders" component={DashboardPage} /> 
      <Route path="users" component={DashboardPage} /> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById("application") 
); 

Обратите внимание, что в примере Идент потока использует localStorage сохраняться userAccess маркеры и т.д. Я действительно не хотят использовать localStorage или куки в это время. Я хочу свести к минимуму сложность и сохранить состояние входа в хранилище (state.user). Я специально не хочу объяснять причину этого, кроме как сказать, что существует большой объем информации, которая приходит на этапе аутентификации, который необходимо сохранить в хранилище.

Answer 1

(Опубликовано решение от имени ОП).

Это решение работает для меня, который является небольшой модификацией на ответ:

function isAuthorized(nextState, replace) { 
    if (nextState.location.pathname === "/login") { 
     return; 
    } 
    const state = store.getState(); 
    if (state.user && state.user.loggedIn === true) { 
     return; 
    } 
    replace("/login"); 
} 


render(
    <Provider store={store}> 
     <Router history={browserHistory}> 
      <Route path="/" component={Application} onEnter={(nextState, replace) => isAuthorized(nextState, replace)}> 
       <IndexRoute component={DashboardPage} /> 
       <Route path="login" component={LoginPage} /> 
       <Route path="dashboard" component={DashboardPage} /> 
       <Route path="items" component={DashboardPage} /> 
       <Route path="item-categories" component={DashboardPage} /> 
       <Route path="modifiers" component={DashboardPage} /> 
       <Route path="taxes" component={DashboardPage} /> 
       <Route path="discounts" component={DashboardPage} /> 
       <Route path="orders" component={DashboardPage} /> 
       <Route path="users" component={DashboardPage} /> 
      </Route> 
     </Router> 
    </Provider >, 
    document.getElementById("application") 
); 

Answer 2

Вы можете попробовать сделать что-то вроде

<Route 
    path="/" 
    component={Application} 
    onEnter={ (nextState, replace) => { isAuthorized(nextState, replace, store) } } > 

И в вашей isAuthorized функции

function isAuthorized(nextState, replace, store) { 
    // Now you have access to the store, you can 
    const state = store.getState(); 

    // your logic to validate whether the user is logged in or not 
    if (state.user && state.user.loggedIn === true) { 
    // this user is authenticated 
    // continue.. 
    } 
    else { 
    // unauthenticated user, redirect the user to login page 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }); 

    } 

}