पुन: निर्देशित उपयोगकर्ता राज्य के आधार पर

Question

प्रतिक्रिया अभी में, मेरे रूटर इस तरह दिखता है:

<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/login पर रीडायरेक्ट उपयोगकर्ता पूर्ण नहीं किया है, तो उपयोगकर्ता के प्रवेश नहीं कर रहा है और OnboardedPage/onboarding पर रीडायरेक्ट ऑनबोर्डिंग प्रवाह (उपयोगकर्ता नाम चुनना आदि)। हालांकि, मुझे लगता है कि भविष्य में इन सशर्त रीडायरेक्ट की अधिक आवश्यकता हो सकती है। इन सशर्त रीडायरेक्ट को संभालने का सबसे अच्छा तरीका क्या है? क्या एक ऐसा घटक होना संभव है जो सभी रीडायरेक्ट को संभालता है?

Answer 1

आप एक समारोह है कि जांच करे उपयोगकर्ता के प्रवेश, और सिर्फ आयात कि यदि:

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

Answer 2

<Route> एक onEnter हुक जब मार्ग मैचों में कहा जाता है कि स्वीकार करते हैं। एक हुक कुछ इस तरह दिखेगा:

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

तब तो की तरह उपयोग:

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

---

एक और अधिक composable उदाहरण के लिए, कि मदद से आप कई चेकों गठबंधन:

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); 
    }; 
} 

फिर गठबंधन करो!

<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>