vue.js - vue 登录鉴权的问题，错误返回的问题？

Question

使用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

<script>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)                })        }    }}</script>

后端接口,用户名, 密码错误时的返回信息

Answer 1

这些逻辑其实不用考虑其他人使用，写的人知道就完事了。

我说个改动点哈

axios.defaults.headers.common.Authorization = `Bearer ${userData.token}`
这个其实应该封装一个独立的 request，比如 axios.create 一个新实例，而不应该给 axios 直接赋值。有可能会有一些请求不需要 Authorization

至于你说的进入到首页的问题，就是你没有做拦截器，然后接收的时候也没判断 message 是否存在，一般我们会在拦截器做拦截，然后统一的异常透出