Javascript 用于动态身份验证/重定向的Redux中间件

Javascript 用于动态身份验证/重定向的Redux中间件,javascript,authentication,reactjs,redux,Javascript,Authentication,Reactjs,Redux,我试图创建一个非常简单的redux中间件来处理我的应用程序中的身份验证需求。此应用程序中的用户可以有3种状态: 未注册(应始终重定向到登录) 部分注册(应将他们重定向到辅助登录。用户需要属于某个组才能访问应用程序中的任何功能。因此,在初始注册后,他们需要创建或加入组。或者,如果他们离开组,他们将处于此状态,并且需要执行任何操作将他们重定向到此页面,直到他们加入新组) 完全注册,在他们注销或离开组之前,应具有完全访问权限,无强制重定向 因此,我认为一个简单的解决方案是使用中间件来检查任何异步操

我试图创建一个非常简单的redux中间件来处理我的应用程序中的身份验证需求。此应用程序中的用户可以有3种状态:

  • 未注册(应始终重定向到登录)
  • 部分注册(应将他们重定向到辅助登录。用户需要属于某个组才能访问应用程序中的任何功能。因此,在初始注册后,他们需要创建或加入组。或者,如果他们离开组,他们将处于此状态,并且需要执行任何操作将他们重定向到此页面,直到他们加入新组)
  • 完全注册,在他们注销或离开组之前,应具有完全访问权限,无强制重定向
因此,我认为一个简单的解决方案是使用中间件来检查任何异步操作的状态代码并相应地重定向。因此,401可能会触发重定向到登录/注册页面,
/login
,422可能会触发重定向到二级注册,
/register

这是我到目前为止的基本设置:

import { browserHistory } from 'react-router'

export default function({ dispatch }) {
  return next => action => {
    const url = window.location.href.split('/')
    const location = url[url.length - 1]

    if (location === 'login' || location === 'registration') {
      return next(action)
    }

    let status;
    const token = localStorage.getItem('token')
    if (action.payload) {
      status = action.payload.status
    }

    if (status === 401) {
      return browserHistory.push('/login')
    } else if (status === 422) {
      console.log('redirect to registration')
      return browserHistory.push('/register')
    }

    return next(action)
  }
}
显然,这种方法不像大多数react/redux auth示例使用的那样,对auth使用任何高阶组件。它似乎工作正常,但我看到一个视图在重定向前的一瞬间开始渲染,所以它不是100%平滑的


有没有更有效/简单的方法来处理这个三态身份验证系统?我正在使用react路由器redux。

你解决过这个问题吗?不完全是@jamesemanon。我在另一个使用高阶组件的应用程序上设置了不同的身份验证,但我还没有在中间件工作的情况下实现更动态的路由,我认为高阶组件可能也是解决这个问题的方法。你解决过这个问题吗?不完全是@jamesemanon。我已经在另一个应用程序上使用高阶组件设置了不同的身份验证,但我还没有在中间件工作的情况下实现更动态的路由,我认为高阶组件可能也是实现这一点的方法。