相关疑难解决方法(0)

通用Auth Redux和React路由器

我在使用redux和路由器进行身份验证方面遇到了一些麻烦,我希望能够对如何最好地解决我的问题做一些澄清.

我有一个登录组件,在提交时调度以下操作:

export const loginUser = (creds) => {
  return dispatch => {

    dispatch(requestLogin(creds))

    return fetch('http://127.0.0.1:4000/api/login', {
      ...
    })
      .then(res => {
        dispatch(receiveLogin())
        browserHistory.push('/admin')
        ...
      })
      ...
  }
}
Run Code Online (Sandbox Code Playgroud)

receiveLogin操作将状态中的isAuthenticated标志更新为true.我的受保护路由具有以下onEnter挂钩:

export default (state) => {
  return {
    path: '/',
    component: App,
    childRoutes: [
      {
        path: 'protected',
        component: Protected,
        ...
        onEnter(nextState, replaceState) {
          const loggedIn = //check state.isAuthenticated
          if (!loggedIn) {
            replaceState(null, 'login')
          }
        }
      }
    ]
  }
}
Run Code Online (Sandbox Code Playgroud)

正如你所看到的,我将国家作为一个论点.这使我可以从服务器以及客户端访问初始状态.但是,在我的登录操作发生后,显然onEnter挂钩仍将使用初始状态.

我想知道的是更新isAuthenticated标志后获取当前状态的最佳方法,并在我的onEnter挂钩中使用它.或者,我的方法是完全有缺陷的,我应该完全采用不同的方式吗?

reactjs react-router redux

13
推荐指数
1
解决办法
7388
查看次数

标签 统计

react-router ×1

reactjs ×1

redux ×1