utente reindirizzamento in base allo stato in Reagire

Question

In questo momento, il mio router si presenta come segue:

<Router history={browserHistory}> 
    <Route component={Provider}> 
     <Route path="/" component={AppPage}> 
      <Route path="login" component={LoginPage}/> 
      <Route component={LoggedinPage}> 
       <Route path="onboarding" component={OnboardingPage}/> 
       <Route component={OnboardedPage}> 
        <IndexRoute component={HomePage}/> 
        <Route path="settings" component={SettingsPage}/> 
       </Route> 
      </Route> 
     </Route> 
    </Route> 
</Router> 

LoggedinPage reindirizza al /login se l'utente non è connesso e OnboardedPage reindirizza /onboarding se l'utente non ha completato il flusso di onboarding (scelta del nome utente, ecc.). Tuttavia, penso che più di questi reindirizzamenti condizionali potrebbero essere necessari in futuro. Qual è il modo migliore per gestire questi reindirizzamenti condizionali? È possibile avere un singolo componente che gestisca tutti i reindirizzamenti?

Answer 1

Si potrebbe avere una funzione che controlla il se l'utente è connesso, e basta importare che:

import {browserLocation} from './browser-location' 
export default function checkLoggedIn() { 
    if (localStorage.jwt === null) 
     browserLocation.pushState('/login') 
} 

Answer 2

<Route> s accettano un gancio onEnter che viene chiamato quando le partite di percorso. Un gancio sarebbe simile a questa:

function requireAuth(nextState, replace) { 
    if (!loggedIn()) { 
     replace({ pathname: 'login' }); 
    } 
} 

Quindi utilizzare in questo modo:

<Route path="/" component={AppPage}> 
    <Route path="home" component={HomePage} onEnter={requireAuth}/> 
    <Route path="login" component={LoginPage}/> 
</Route> 

---

Un esempio più componibile, che consente di combinare più controlli:

function checkAuth() { 
    if (!loggedIn()) { 
     return { pathname: 'login' }; 
    } 
} 

function checkOnboarding() { 
    if (!completedOnboarding()) { 
     return { pathname: 'onboarding' }; 
    } 
} 

function redirect(...checks) { 
    return function(nextState, replace) { 
     let result; 
     checks.some(check => { 
      result = check(); 
      return !!result; 
     }); 
     result && replace(result); 
    }; 
} 

Quindi combinare lontano!

<Route path="/" component={AppPage}> 
    <Route path="home" component={HomePage} 
     onEnter={redirect(checkAuth, checkOnboarding)}/> 
    <Route path="login" component={LoginPage}/> 
    <Route path="onboarding" component={OnboardingPage} 
     onEnter={redirect(checkAuth)}/> 
</Route>