vue 登录鉴权的问题,错误返回的问题?-灵析社区

biubiuuuuu

使用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) }) } } } 后端接口,用户名, 密码错误时的返回信息 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241011/2ee6bc65b3ba7470951f4e98e39b60f4.png)

阅读量:190

点赞量:0

问AI
这些逻辑其实不用考虑其他人使用,写的人知道就完事了。 我说个改动点哈 "axios.defaults.headers.common.Authorization ="Bearer ${userData.token}" " 这个其实应该封装一个独立的 request,比如 axios.create 一个新实例,而不应该给 axios 直接赋值。有可能会有一些请求不需要 Authorization 至于你说的进入到首页的问题,就是你没有做拦截器,然后接收的时候也没判断 message 是否存在,一般我们会在拦截器做拦截,然后统一的异常透出