根据React中的状态重定向用户
根据React中的状态重定向用户
提问于 2016-03-29 08:48:18
现在，我的路由器看起来像这样：
<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。然而，我认为未来可能需要更多这样的条件重定向。处理这些条件重定向的最好方法是什么？有没有可能只有一个组件来处理所有的重定向？
回答 2
Stack Overflow用户
发布于 2016-03-29 16:10:54
<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>一个更具组合性的示例，它允许您组合多个检查：
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>Stack Overflow用户
发布于 2016-03-29 09:09:12
您可以使用一个函数来检查用户是否已登录，然后导入：
import {browserLocation} from './browser-location'
export default function checkLoggedIn() {
if (localStorage.jwt === null)
browserLocation.pushState('/login')
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36273584
复制相关文章
相似问题
腾讯云开发者
