如何使用 redux-thunk 处理 Redux 应用程序中失败的身份验证状态？答案

【问题标题】：How do I deal with failed auth statuses in a Redux app using redux-thunk?如何使用 redux-thunk 处理 Redux 应用程序中失败的身份验证状态？
【发布时间】：2017-08-09 06:04:25
【问题描述】：

当服务器从 React/Redux Express 应用程序中的身份验证中间件发回 401 身份验证失败状态时，我正在努力处理客户端中的响应。

简单地说，在加载仪表板时，我正在向受保护的路线发出请求：

router.route('/')
  .get(authenticate, controller.get)

Authenticate 是检查 JWT 令牌的中间件：

exports.authenticate = function(req, res, next) {
  const authorizationHeader = req.headers['authorization']
  let token

  if (authorizationHeader) {
      token = authorizationHeader.split(' ')[1]
  }

  if (token) {
    jwt.verify(token, config.secrets.jwt, (err, decoded) => {
      if (err) {
        logger.log(err)
        res.status(401).json({ error: 'Failed to authenticate' })
      } else {
        User.findById(decoded._id)
        .select('-password')
        .exec()
        .then(user => {
          if (!user) {
            res.status(404).json({ error: 'No such user.' })
          } else {
            req.currentUser = user
            next()
          }
        })
      }
    })
  } else {
    res.status(403).json({ error: 'No token provided.' })
  }
}

所以如果身份验证失败，返回的状态是 401。我正在尝试如何在中间件中优雅地处理 401 状态：

删除作为 jwt 令牌的 localStorage 令牌
运行将删除授权标头的函数
调度 Redux 操作以将身份验证设置回初始状态，这是一个 isAuthenticated 布尔值设置为 false，并且用户返回到一个空对象。然后通过将用户重定向回登录页面在应用程序中进行处理

如前所述，我正在使用 thunk 中间件来处理异步操作（只是不知道如何处理 401 响应）

const configureStore = () => {
  const store = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
    applyMiddleware(thunk)
  )
  return store
}

谢谢你:)

更新我在想我可以在操作中使用 catch，然后查询 res.status 代码，然后清理令牌并注销用户，但这似乎是重复的，我需要为每个需要身份验证的操作执行此操作。

有没有更清洁的方法？我用下面的代码来说明：

export const fetchTransactions = () => dispatch => axios.get('/api/transactions')
  .then(transactions => {
    dispatch({
      type: FETCH_TRANSACTIONS,
      payload: transactions
    })
  }).catch(err => {
    if (err.status === 401) {
      localStorage.removeItem('mm-jwtToken')
      setAuthToken(false)
      dispatch(setCurrentUser({}))
    }
  })

【问题讨论】：

在认证失败时，调度失败的认证操作对吗？
完全正确，但不确定从哪里发送它

标签： javascript node.js authentication redux redux-thunk

【解决方案1】：

最后我在动作创建器中处理了错误，捕获了错误，然后调用了一个handleErr函数：

已删除本地存储令牌
使用 false 调用删除授权标头的函数
返回为了从 Redux 存储中删除用户而需要调度的操作。

函数handleErr (err) { 如果（错误状态 === 401）{ localStorage.removeItem('mm-jwtToken') setAuthToken(假) 返回 setCurrentUser({}) } }

export const fetchTransactions = () => dispatch => axios.get('/api/transactions') .then（交易 => { 派遣（{ 类型：FETCH_TRANSACTIONS，有效负载：交易 }) }, 错误 => { 调度（handleErr（错误）） })

【讨论】：