React路由器3.x限制訪問流量外的頁面

Question

我正在進行購買流程，用戶必須通過多條路徑才能進入最終付款頁面。例如，在您輸入郵寄地址信息的第一條路線上，在您配置購買選擇的第二條路線上，在第三頁上輸入信用卡信息等。總共約5-6頁/路線。我該如何去執行對路由器的限制，以便沒有經過第一頁的人不能訪問第二頁？

我使用的是React Router 3.x，React router redux 4.x以及React Boilerpate here。我閱讀了關於使用React路由器提供的onEnter函數，但我找不到任何具體的例子來說明在哪裏放置該文件，也沒有任何特定的文檔來執行像我想要做的事情，特別是與React Boilerplate結合使用。

有沒有人有任何想法/指導/資源呢？

僅供參考，我的路由文件看起來是這樣的（幾乎是默認路由從樣板文件） -

import { getAsyncInjectors } from 'utils/asyncInjectors'; 

const errorLoading = (err) => { 
    console.error('Dynamic page loading failed', err); // eslint-disable-line no-console 
}; 

const loadModule = (cb) => (componentModule) => { 
    cb(null, componentModule.default); 
}; 

export default function createRoutes(store) { 
    // Create reusable async injectors using getAsyncInjectors factory 
    const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars 

    return [ 
    { 
     path: '/paymentsPage/billing', 
     name: 'billing', 
     getComponent(nextState, cb) { 
     const importModules = Promise.all([ 
      import('containers/Billing'), 
     ]); 

     const renderRoute = loadModule(cb); 

     importModules.then(([component]) => { 
      renderRoute(component); 
     }); 

     importModules.catch(errorLoading); 
     }, 
    }, 
    { 
     path: '/paymentsPage/orgs', 
     name: 'orgs', 
     getComponent(nextState, cb) { 
     const importModules = Promise.all([ 
      import('containers/Organization/reducer'), 
      import('containers/Organization'), 
     ]); 

     const renderRoute = loadModule(cb); 

     importModules.then(([reducer, component]) => { 
      injectReducer('orgs', reducer.default); 
      renderRoute(component); 
     }); 

     importModules.catch(errorLoading); 
     }, 
    }, { 
     path: '/paymentsPage/amount', 
     name: 'amount', 
     getComponent(nextState, cb) { 
     const importModules = Promise.all([ 
      import('containers/Donation/reducer'), 
      import('containers/Donation'), 
     ]); 

     const renderRoute = loadModule(cb); 

     importModules.then(([reducer, component]) => { 
      injectReducer('amount', reducer.default); 
      renderRoute(component); 
     }); 

     importModules.catch(errorLoading); 
     }, 
    }, { 
     path: '/paymentsPage/finalPayment', 
     name: 'finalPayment', 
     getComponent(nextState, cb) { 
     const importModules = Promise.all([ 
      import('containers/FinalPayment/reducer'), 
      import('containers/FinalPayment'), 
     ]); 

     const renderRoute = loadModule(cb); 

     importModules.then(([reducer, component]) => { 
      injectReducer('finalPayment', reducer.ccInfoReducer); 
      injectReducer('finalPayment', reducer.paymentReducer); 
      renderRoute(component); 
     }); 

     importModules.catch(errorLoading); 
     }, 
    }, { 
     path: '/paymentsPage/confirmation', 
     name: 'confirmation', 
     getComponent(nextState, cb) { 
     const importModules = Promise.all([ 
      import('containers/Confirmation/reducer'), 
      import('containers/Confirmation'), 
     ]); 

     const renderRoute = loadModule(cb); 

     importModules.then(([reducer, component]) => { 
      injectReducer('confirmation', reducer.default); 
      renderRoute(component); 
     }); 

     importModules.catch(errorLoading); 
     }, 
    }, { 
     path: '*', 
     name: 'notfound', 
     getComponent(nextState, cb) { 
     import('containers/NotFoundPage') 
      .then(loadModule(cb)) 
      .catch(errorLoading); 
     }, 
    }, 
    ]; 
} 

Answer 1

技術上講，它的JavaScript，因此任何路由是由用戶有點操縱訪問。如果您只想鼓勵用戶遵循某些路線，您可以使用重定向。例如，您可以在組件掛載之前檢查狀態中的標誌，並且如果它沒有正確設置，則重定向到您認爲用戶應該在的路線。

更爲極端的解決方案可能是動態加載來自服務器的反應組件，類似於webpack的開發服務器（和其他構建工具）如何使用熱重新加載功能（免責聲明：我已經從來沒有嘗試過，所以我不知道它會如何工作）。這會讓你對用戶可用的路線有所歧視。 This文章（也有其他文章）概述了這種技術的工作原理。