重新路由未使用 React 登录的用户的干净方法? [英] Clean way to re-route user that isn't logged in with React?

问题描述

我想我总是可以在 WillTransitionTo 中添加登录名，它会通过 Redux 调用商店以验证用户是否已登录，但这似乎有点麻烦，尤其是因为我必须为每个组件添加 WillTransitionTo() 逻辑.

I guess I could always add login in WillTransitionTo which would do a call to the store via Redux to verify that the user is logged in but this seems a bit hacky, especially since since I have to add WillTransitionTo() logic to every single component.

有人有更好的想法吗?我将努力使用 onEnter 将某些内容连接到 isAuthorized.

Anyone have any better ideas? I'm going to work toward wiring something into isAuthorized with the onEnter.

这是执行反应路由器接线的应用程序的根.

This is the root root of the application which performs the react-router wire-up.

反应路由器:2.0.4

反应:15.0.2

const store = configureStore();


function isAuthorized() {

}

render(
    <Provider store={store}>
     <Router history={browserHistory}>

        <Route path="/" component={Application} onEnter={isAuthorized}>
            <IndexRoute component={DashboardPage} />
            <Route path="login" component={LoginPage} />
            <Route path="dashboard" component={DashboardPage} />
            <Route path="items" component={DashboardPage} />
            <Route path="item-categories" component={DashboardPage} />
            <Route path="modifiers" component={DashboardPage} />
            <Route path="taxes" component={DashboardPage} />
            <Route path="discounts" component={DashboardPage} />
            <Route path="orders" component={DashboardPage} />
            <Route path="users" component={DashboardPage} />
        </Route>
     </Router>
    </Provider>,
    document.getElementById("application")
);

请注意，auth-flow 中的示例使用 localStorage 来持久化 userAccess 令牌等.此时我真的不想使用 localStorage 或 cookie.我想最小化复杂性并将登录状态存储在商店(state.user)中.除了说身份验证步骤中有大量信息需要持久保存到商店之外，我不想具体讨论其原因.

Note that the example in auth-flow utilizes localStorage to persist userAccess tokens, etc. I really don't want to use localStorage or cookies at this time. I want to minimize the complexity and store the login state in the store(state.user). I don't specifically want to go into the reason for this other than to say that there is a large amount of information that comes the authentication step that needs to be persisted to the store.

推荐答案

(代表 OP 发布解决方案).

这个解决方案对我有用，只是对答案稍作修改:

This solution worked for me which is a slight modification on the answer:

function isAuthorized(nextState, replace) {
    if (nextState.location.pathname === "/login") {
        return;
    }
    const state = store.getState();
    if (state.user && state.user.loggedIn === true) {
        return;
    }
    replace("/login");
}


render(
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={Application} onEnter={(nextState, replace) => isAuthorized(nextState, replace)}>
                <IndexRoute component={DashboardPage} />
                <Route path="login" component={LoginPage} />
                <Route path="dashboard" component={DashboardPage} />
                <Route path="items" component={DashboardPage} />
                <Route path="item-categories" component={DashboardPage} />
                <Route path="modifiers" component={DashboardPage} />
                <Route path="taxes" component={DashboardPage} />
                <Route path="discounts" component={DashboardPage} />
                <Route path="orders" component={DashboardPage} />
                <Route path="users" component={DashboardPage} />
            </Route>
        </Router>
    </Provider >,
    document.getElementById("application")
);

这篇关于重新路由未使用 React 登录的用户的干净方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！