Question

当服务器在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状态，并且：

删除localStorage标记，即jwt标记
运行将删除授权标题的功能
调度Redux操作以将auth设置回初始状态，这是一个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({}))
    }
  })

Answer 1

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

删除了本地存储令牌
使用false调用函数，删除授权标题
返回需要调度的操作，以便从Redux商店中删除用户。

function handleErr（err）{ if（err.status === 401）{ localStorage.removeItem（ '毫米-jwtToken'） setAuthToken（假） return setCurrentUser（{}） } }

export const fetchTransactions =（）=＆gt; dispatch =＆gt; axios.get（ '/ API /交易'） .then（transactions =＆gt; { 调度（{ 类型：FETCH_TRANSACTIONS，有效载荷：交易 }）}，err =＆gt; { 讯（handleErr（ERR）） }）

如何使用redux-thunk处理Redux应用程序中的auth状态失败？

1 个答案: