基於ajax響應的初始路由反應路由器

Question

在我的應用程序中，我擁有管理頁面和登錄後的權限，我只想爲擁有此權限的用戶授予對此頁面的訪問權限。

有什麼方法可以在應用程序被引用之前爲組件加載路由並使用ajax？ 有什麼方法可以在某些操作（如登錄）後更改組件的路由？ 解決此問題的最佳做法是什麼？

Answer 1

react-router回購中有example。他們使用onEnter屬性來檢查授權：

<Router history={withExampleBasename(browserHistory, __dirname)}> 
    <Route path="/" component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
    </Route> 
</Router> 

的onEnter道具是一個正在進入的路徑之前調用函數：

function requireAuth(nextState, replace) { 
    if (!auth.loggedIn()) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

的的OnEnter功能具有以下調用簽名：

onEnter(nextState, replace, callback?) 

這使您可以訪問狀態以檢查用戶是否具有管理員權限。

另一個經常討論的方法是使用更高階的組件。需要管理員權限的組件不需要知道這些信息，但是由限制訪問的組件包裝。

一些詳細信息：

https://blog.tighten.co/react-101-routing-and-auth
https://github.com/joshgeller/react-redux-jwt-auth-example
https://auth0.com/blog/secure-your-react-and-redux-app-with-jwt-authentication/

一如往常的客戶端不被信任和數據應該固定在服務器上。