根据React中的状态重定向用户

Redirecting user based on state in React

本文关键字：重定向 用户 状态 React 根据      更新时间：2023-09-26

现在，我的路由器看起来是这样的：

<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。然而，我认为未来可能需要更多这样的有条件重定向。处理这些条件重定向的最佳方法是什么？有可能有一个单独的组件来处理所有重定向吗？

<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>

您可以有一个函数来检查用户是否登录，然后导入：

import {browserLocation} from './browser-location'
export default function checkLoggedIn() {
    if (localStorage.jwt === null)
        browserLocation.pushState('/login')
}
相关文章：