Vuex+Axios登录场景下输入错误账号密码时如何向用户展示错误提示

axios默认仅当HTTP状态码处于2xx区间时才会进入catch分支，出现401报错却走到then分支的问题，基本由以下两类配置错误导致，对应解决方法如下：

• 配置问题1：axiosIns实例自定义了validateStatus规则，将401纳入了成功状态范围
  找到axiosIns的定义位置，检查validateStatus配置项，确保规则仅放行2xx状态码即可，参考配置：

  const axiosIns = axios.create({
    baseURL: '/你的接口前缀',
    // 保留默认校验规则即可，不要额外添加401的放行逻辑
    validateStatus: (status) => status >= 200 && status < 300
  })
  

• 配置问题2：axiosIns的响应拦截器吃掉了401错误，未抛出到业务层
  检查你给axiosIns添加的响应拦截器，错误回调分支必须返回Promise.reject(error)才能把错误传递到业务代码的catch块，参考配置：

  axiosIns.interceptors.response.use(
    (response) => response,
    (error) => {
      // 如果你需要全局处理401逻辑可以在这里添加，比如清空token跳转登录页
      if (error.response?.status === 401) {
        // 全局401处理逻辑
      }
      // 必须保留这行，否则错误会被拦截器吞掉，不会进入业务catch
      return Promise.reject(error)
    }
  )
  

你可以先在当前的then回调第一行添加console.log(res.status)验证，如果输出为401，即可确认是上述两类配置问题。

现有代码优化建议 #

你当前LOGIN方法catch分支的throw error可以删除，已经调用reject(error)的情况下不需要重复抛出错误，外层调用action时按如下方式编写即可展示错误提示：

// 组件内调用登录action示例
this.$store.dispatch('LOGIN', 登录表单数据)
  .then(() => {
    // 登录成功跳转逻辑
  })
  .catch(() => {
    // 直接读取vuex中存储的错误信息展示给用户即可
    this.$message.error(this.$store.state.error)
  })

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