使用vue2 做前端的登录页面时。 当用户名密码错误时,每次都进入了loginView.vue 的.then部门内容,提示登录成功。 我的具体代码如下。1.请各位大神,指正一下,如何修改。2.在这种从api-->store->views 调用传递中,如何保证异常、数据的正确传递,我该怎么优化我的代码?不胜感激 ### api/auth.js 接口调用 import axios from "axios"; export default { login: function (credentials) { return axios.post(localhost + 'login', credentials) .then(({ data }) => data) // 只返回数据部分,也可以不处理直接返回整个响应 .catch(error => Promise.reject(error)); // 将错误原样返回,以便上层调用者可以处理 } } ### store/auth.js import AuthApi from '@/api/auth' import axios from 'axios' // 定义模块名 export const auth = { state: { user: null }, getters: { // !! just converts the value to a boolean isLogged: state => !!state.user }, mutations: { setUserData(state, userData) { state.user = userData localStorage.setItem('user', JSON.stringify(userData)) axios.defaults.headers.common.Authorization = `Bearer ${userData.token}` }, clearUserData() { localStorage.removeItem('user') location.reload() } }, actions: { login({ commit }, credentials) { AuthApi.login(credentials) .then(({ data }) => { commit('setUserData', data) return data; // 这里返回数据用于后续操作(可选,视业务需求) }).catch(error => { console.log(error) throw error; // 将错误重新抛出,让组件能够捕获 }) }, logout({ commit }) { commit('clearUserData') } }, } views/LoginView.vue export default { data() { return { email: '', password: '', } }, methods: { login() { this.$store.dispatch('login', { email: this.email, password: this.password }) .then(() => { alert('登录成功') this.$router.push({ name: '/' }) }) .catch((error) => { alert(error.response.data.error) console.log(error) }) } } } 后端接口,用户名, 密码错误时的返回信息 