React-Redux授权触发LOGOUT动作时出现InvalidTokenError错误求助

嘿，我一眼就瞅出你代码里的几个问题，正是它们导致了这个错误，咱们一步步来修复：

1. 错误的运算符使用 #

你的reducer里把比较运算符===写成了赋值运算符=，这会导致LOGIN和LOGOUT的条件永远为真，逻辑完全混乱了！比如if(action.type = 'LOGIN')这行，每次执行都会把action.type强制赋值为LOGIN，不管实际触发的是什么动作，这肯定会出问题。

2. LOGOUT动作未返回新状态 #

Redux reducer必须始终返回一个新的状态对象，你的LOGOUT处理只移除了localStorage的token，但没有返回状态，这会导致状态没有被正确重置，后续的逻辑还会基于旧状态执行。

3. CHECK_LOGIN未做token有效性校验 #

当你执行LOGOUT移除token后，如果有地方触发了CHECK_LOGIN动作，此时localStorage.authToken是null，直接调用jwt(null)就会抛出InvalidTokenError，必须先确保token存在且有效再解析。

修复后的reducer代码 #

const loginRegLogoutReducer = (state = {}, action) => {
  // 优先处理LOGOUT，避免后续逻辑干扰
  if (action.type === 'LOGOUT') {
    localStorage.removeItem('authToken');
    // 返回空状态，彻底重置用户信息
    return {};
  }

  if (action.type === 'CHECK_LOGIN') {
    const authToken = localStorage.authToken;
    // 先校验token是否存在且不为空
    if (authToken && authToken !== null) {
      try {
        const user = jwt(authToken);
        return { username: user.username, id: user.sub, birthday: user.birthday };
      } catch (err) {
        // 如果token无效，直接清空并返回空状态
        localStorage.removeItem('authToken');
        return {};
      }
    }
    // 没有有效token时返回空状态
    return {};
  }

  if (action.type === 'LOGIN') {
    try {
      const user = jwt(action.token);
      localStorage.setItem('authToken', action.token);
      return { username: user.username, id: user.sub, birthday: user.birthday };
    } catch (err) {
      // 处理登录时的无效token情况，避免崩溃
      console.error('Invalid login token:', err);
      return state;
    }
  }

  return state;
};

额外的优化建议 #

• 给reducer设置默认状态state = {}，替代!state的判断，更符合Redux的最佳实践。
• 给jwt解析加上try-catch包裹，不管是登录还是校验时，都能处理无效token的情况，避免页面崩溃。
• 调整LOGOUT的处理顺序到最前面，确保优先执行状态重置，避免其他逻辑干扰。

这样修改后，触发LOGOUT动作时会正确清空localStorage并重置状态，后续的CHECK_LOGIN也会先校验token有效性，就不会再出现InvalidTokenError啦！

内容的提问来源于stack exchange，提问作者dude