反応している状態に基づいてユーザーをリダイレクトする、私のルータは、このようになります。オンボーディングフロー(ユーザ名の選択など)。しかし、私はこれらの条件付きリダイレクトの多くが将来必要になると思います。これらの条件付きリダイレクトを処理する最良の方法は何ですか?すべてのリダイレクトを処理する単一のコンポーネントを持つことは可能ですか?今
Q
今
5
A
答えて
0
あなたは、ユーザーがログインして、ちょうどことをインポートしているかどうかを確認する機能を持つことができる:
import {browserLocation} from './browser-location'
export default function checkLoggedIn() {
if (localStorage.jwt === null)
browserLocation.pushState('/login')
}
1
<Route>
sがルートマッチと呼ばれる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>
より構成可能例:
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>
+0
+1、これは良いアプローチですが、私を悩ますのは、replaceがウィンドウ全体をリフレッシュし、これがSPAスタイルに含まれていないことだけです。 –
関連する問題
- 1. dateutil.rrule.rrule.between()今
- 2. は今
- 3. 今年、今週、今月、今四半期に基づいて売上を集計する最速の方法は?
- 4. は今mongoidコール
- 5. は今のListView
- 6. 今値セッション
- 7. は:今日@Autowired
- 8. 今後は
- 9. 今のC
- 10. メモリリークが今C++
- 11. フォームアクションは今MVC 3
- 12. 今後のJavaScriptオーディオ?
- 13. Magentoの:Storeviewアクセス今
- 14. mysqlの今()関数
- 15. jQueryの:今まで
- 16. Apacheは今日マック
- 17. カウント今日の訪問、今週、先月の総[MySQLのクエリ]
- 18. NSDate - 今月の予定日(今年の日ではない)?
- 19. なぜ新しい日付今日は今日昨日返す
- 20. mysqlは今日から今日までを選択します
- 21. 今後のフォークジョイン・フレームワークのリソース
- 22. 小枝:今年の各月
- 23. 今日はCron Job Start?
- 24. 今月のカレンダー表示
- 25. 今月の就業日数
- 26. 今日の日付比較
- 27. 今週の曜日のリスト
- 28. のJavaのPreparedStatement:今HASHBYTES
- 29. は今のでBOX2D体
- 30. デフォルトの「未来」今年dateutil
私は手動でURLをこのように正しく解析する必要がありますか?私は 'if(localStorage.jwt === null &&!window.location.pathname.match(/^\/login(\/| $)/))'を必要とします。 'これを行い、それでも使用する方法はありますかURLを解析するためにルータに反応しますか? –
私は答えを再表示しました。したがって、この関数をインポートし、ルーティングするコンポーネントのレンダー部分で呼び出すだけです。 –