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

  • Z时代
  • 2024-02-08
  • 分类：IT

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

后端接口,用户名, 密码错误时的返回信息
vue 登录鉴权的问题，错误返回的问题？

回答：

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

我说个改动点哈

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

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

回答：

其实问题你都知道，就是每次登录失败都会进 .then。

为什么呢？因为它不是一个 axios.post() 的调用错误。调用是正确的，也反正了有效的响应内容，只是这个内容描述的是一个错误。

知道问题改起来也就容易了

    login: function (credentials) {
        return axios.post(...)
            .then(({ data }) => {
                if (data?.message === "用户名密码错误") {
                    return Promise.reject(new Error(data.message));
                }
                return data;
            });
            // 既然是抓住什么都不处理直接扔出去，那又何必抓呢
            // .catch(error => Promise.reject(error))
    }

这里的 if (data?.message = "用户名密码错误") {...} 只是纯粹根据你提供的响应内容来写的。这里应该有一个判断错误的逻辑，比如“只要有 message 属性就算是失败”，那就只需要判断是否存在 message 属性，如果有就把 message 封装成 Error 抛出来，这样可以兼容多种错误逻辑。

以上是 vue 登录鉴权的问题，错误返回的问题？ 的全部内容， 来源链接： utcz.com/p/935367.html

回到顶部