如何在Vue中获取Laravel返回的验证错误并修复注册失败跳转问题

核心问题原因 #

你遇到的两个问题根源一致：Vuex的register、login action中捕获了请求错误但未向外抛出，导致外层调用时无论接口成功失败，都会执行then分支的跳转逻辑；同时错误信息被拦截在Vuex内部，组件层无法获取。

第一步：修改Vuex action代码 #

将错误信息向外抛出，同时保留请求返回的完整结构，修改后的actions代码如下：

actions: {
    async login({ dispatch }, credentials) {
        return axios.post('http://127.0.0.1:8000/api/login', credentials)
        .then( res => {
            if (res.data.success) {
                return dispatch('attempt', res.data.token)
            } 
        })
        .catch( err => {
            // 抛出后端返回的错误内容
            throw err.response.data
        })
    },

    async attempt({ commit, state }, token) {
        if (token) {
            commit('SET_TOKEN', token)
        }
        if(!state.token) {
            return
        }
        try {
            await axios.get('http://127.0.0.1:8000/api/user')
                .then(res => {
                    commit('SET_USER', res.data)
                })
        } catch (e) {
            commit('SET_TOKEN', null)
            commit('SET_USER', null)
            throw e.response.data
        }
    },

    async register({ }, credentials) {
        return axios.post('http://127.0.0.1:8000/api/register', credentials)
        .catch(err => {
            // 抛出后端返回的错误内容
            throw err.response.data
        })
    },

    logoutAction({ commit }) {
        return axios.post('http://127.0.0.1:8000/api/logout')
            .then( () => {
                commit('SET_TOKEN', null)
                commit('SET_USER', null)
            })
    },
}

第二步：修改注册提交逻辑，存储并展示错误 #

首先在注册组件的data中新增错误存储字段：

data() {
  return {
    form: {
      // 原有表单字段保持不变
      name: '',
      email: '',
      password: '',
      password_confirmation: ''
    },
    // 新增错误存储字段
    globalTip: '', // 全局提示信息
    fieldErrors: {} // 字段校验错误信息
  }
}

修改submitRegistration方法，捕获错误并赋值：

submitRegistration() {
  // 每次提交前清空旧错误
  this.globalTip = ''
  this.fieldErrors = {}
  this.register(this.form)
    .then(() => {
      // 只有接口成功才会执行跳转
      this.$router.push({name:'home'})
    })
    .catch((err) => {
      if (
        err.name !== "NavigationDuplicated" &&
        !err.message.includes("Avoided redundant navigation to current location")
      ) {
        // 赋值错误信息
        this.globalTip = err.message || '操作失败，请稍后重试'
        this.fieldErrors = err.errors || {}
      }
    });
},

第三步：页面上展示错误信息 #

在注册表单对应位置添加错误展示代码即可：

<!-- 全局提示展示 -->
<div v-if="globalTip" style="color: red; margin: 10px 0;">
  {{ globalTip }}
</div>

<!-- 表单字段示例，每个输入框下方对应展示字段错误 -->
<div>
  <label>邮箱</label>
  <input v-model="form.email" type="email">
  <div v-if="fieldErrors.email" style="color: red; font-size: 12px;">
    {{ fieldErrors.email[0] }}
  </div>
</div>

<div>
  <label>密码</label>
  <input v-model="form.password" type="password">
  <div v-if="fieldErrors.password" style="color: red; font-size: 12px;">
    {{ fieldErrors.password[0] }}
  </div>
</div>

登录逻辑的错误展示和上述注册逻辑完全一致，按相同方式修改即可。

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