可能用`onEnter`延遲組件渲染？

我正在使用反應路由器onEnter屬性來處理驗證，如下所示，也如"auth-flow" example中所示。可能用`onEnter`延遲組件渲染？

function requireAuth(nextState, replace, next) { 
    Auth.validateToken() 
     .then(() => { 
     next(); 
     }) 
     .fail(() => { 
     replace('/login'); 
     next(); 
     }); 
    } 

    <Router history={history}> 
     <Route path="/" component={App} > 
     <IndexRoute 
      component={Dashboard} 
      onEnter={requireAuth} 
     /> 
     <Route 
      path="login" 
      component={LogInForm} 
     /> 
     </Route> 
    </Router>

我使用的onEnter異步回調功能，因爲我的令牌驗證需要一個服務器調用。

我遇到的問題是此示例中的Dashboard組件在調用next()之前呈現/掛載。理想情況下，渲染將等待直到回調被觸發。

我誤解了這是如何工作的？有沒有辦法延遲渲染路由組件，直到某些條件成立？

來源

2016-09-16 Matt Fordham

千萬不要延遲路由渲染，您的用戶應該得到更好的。

這樣做的方式完全不同，那就是讓渲染的實際頁面包含查看是否有人有權查看它的邏輯，其起始state的形式與authorized: false類似，並且回調切換使用this.setState({ authorized: resultFromCallback })。

這種狀態變化將引起反應，您的網頁上再次呼籲render()，如果值是不同，然後在你的頁面的render()功能，您只需檢查this.state.authorized看你是否應該向用戶呈現一個包含UI所有他們應該看作匿名用戶的位，或者他們應該作爲授權用戶看到的所有位。

... 
    componentDidount() { 
    whateverlib.checkForAuthorization(this.handleAuthorization); 
    }, 
    handleAuthorization(authorized) { 
    this.setState({ authorized }); 
    }, 
    render() { 
    if(this.state.authorized) { 
     return this.renderAuthorizedUI(); 
    } 
    return this.renderAnonymousUI(); 
    }, 
...

還記得你的應用程序仍然是只是在網頁上運行JavaScript，所以你爲什麼會連檢查每次加載網頁？你所需要做的就是檢查任何頁面，存儲結果並完成。只要用戶保持打開狀態，他們的授權狀態就不會自動從一個反應路由器應用程序管理的頁面切換到另一個，因此您可以使用應用程序全局跟蹤器。

var authorizer = require('./lib/whatever-thing-you-wrote-for-this'); 

var YourPage = React.createClass({ 
    ... 
    componentDidMount() { 
    if (!authorizer.isAuthorized()) { 
     authorizer.tryAuthorize(this.handleAuthorization); 
    } 
    }, 
    handleAuthorization() { 
    this.forceUpdate(); 
    }, 
    render() { 
    if(authorizer.isAuthorized()) { 
     return this.renderAuthorizedUI(); 
    } 
    return this.renderAnonymousUI(); 
    }, 
    ... 
});

來源

2016-09-16 22:33:49

這些真的是很棒的想法，謝謝！不過，它感覺這應該更多地以「重定向」的方式處理。你不認爲未經授權的用戶的瀏覽器應該被重定向到'/ login'之類的東西嗎？ –

我不知道。網址意味着成爲互聯網上資源的穩定單位（網絡或其他），奇蹟般地改變某人認爲他們正在遵循的鏈接，並期望*和*會惹惱您的用戶。相反，呈現他們想要的頁面，但去「你沒有登錄。這是登錄表單。在這裏，沒有必要點擊任何其他地方，只需填寫這個，點擊登錄，甚至無需重新加載頁面，你將獲得你正在尋找的內容「。是的，你應該有一個專門的'/ login'路由，用戶可以明確地調用，但是你不需要重定向到它。它是反應。 –

詳細說明「它是React」：您的登錄頁面應該合理地使用模塊化組件來處理登錄 - 當用戶尚未獲得授權時，也可以在其他頁面上使用該組件。登錄組件可以容納所有授權碼，您可以使用'onAuthorized = {authorized => this.setState {{authorized}）}'屬性來引導它，以確保它自動爲加載的任何頁面執行正確的操作它進入它的用戶界面。 –

可能用`onEnter`延遲組件渲染？

回答

相關問題