Question

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

未注册（应始终重定向到登录）
部分注册（应将其重定向到辅助登录。用户需要属于某个组才能访问应用中的任何功能。因此，在初次注册后，他们需要创建或加入群组。或者如果他们离开他们的群组他们＆＃ 39;将处于此状态，并且需要将任何操作重定向到此页面，直到他们加入新组）
完全注册后，应该具有完全访问权限，没有强制重定向，直到他们退出或离开他们的群组。

所以我认为一个简单的解决方案就是让中间件检查任何异步操作的状态代码并相应地重定向。因此，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示例所使用的那样使用任何更高阶的组件。它似乎工作正常，但我看到一个视图在重定向之前开始渲染一瞬间，所以它不是100％平滑。

有没有更有效/简单的方法来处理这三个状态auth系统？我正在使用react-router-redux。

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

0 个答案: