vue-axios-github源码解析：手把手教你实现401错误自动跳转登录页

vue-axios-github源码解析：手把手教你实现401错误自动跳转登录页

【免费下载链接】vue-axios-githubVue 全家桶 + axios 前端实现登录拦截、登出、拦截器等功能项目地址: https://gitcode.com/gh_mirrors/vu/vue-axios-github

vue-axios-github是一个基于Vue全家桶与axios构建的前端项目，专注于实现登录拦截、登出功能和请求拦截器等核心功能。本文将深入解析项目源码，带你掌握如何优雅处理401错误并实现自动跳转登录页的完整方案。

为什么需要处理401错误？

在前后端分离架构中，用户认证通常通过Token实现。当Token过期或无效时，服务器会返回401状态码。此时需要清除本地无效Token并引导用户重新登录，这一过程的自动化处理能显著提升用户体验。

核心实现文件探秘

项目的401错误处理逻辑主要集中在以下几个关键文件：

• HTTP拦截器配置：src/http.js
• Vuex状态管理：src/store/store.js
• 状态类型定义：src/store/types.js

step by step实现401自动跳转

1. 配置axios响应拦截器

在src/http.js中，项目通过axios的响应拦截器统一处理错误：

// http response 拦截器 axios.interceptors.response.use( response => { return response }, error => { if (error.response) { switch (error.response.status) { case 401: // 401 清除token信息并跳转到登录页面 store.commit(types.LOGOUT) // 只有在当前路由不是登录页面才跳转 router.currentRoute.path !== 'login' && router.replace({ path: 'login', query: { redirect: router.currentRoute.path }, }) } } return Promise.reject(error.response.data) }, )

这段代码的核心功能是：当接收到401错误时，调用Vuex的LOGOUT mutation清除Token，并跳转到登录页面，同时记录当前路由作为重定向参数。

2. 实现LOGOUT状态管理

在src/store/types.js中定义了LOGOUT常量：

export const LOGOUT = 'logout';

在src/store/store.js中实现LOGOUT mutation：

[types.LOGOUT]: (state) => { localStorage.removeItem('token'); state.token = null }

该 mutation 负责两件事：

• 从localStorage中移除token
• 将Vuex状态中的token设置为null

3. 完整的登录状态管理

项目通过Vuex实现了完整的登录状态管理，包括：

• 登录时保存token到localStorage和Vuex
• 登出时清除token
• 请求时自动在header中添加token

关键技术点解析

路由跳转判断

router.currentRoute.path !== 'login' && router.replace(...)

这段代码避免了在用户已经处于登录页面时重复跳转，防止出现无限循环。

重定向参数

query: { redirect: router.currentRoute.path }

通过query参数记录用户原本要访问的页面，登录成功后可以自动跳回该页面，提升用户体验。

请求拦截器添加Token

在src/http.js的请求拦截器中，自动为每个请求添加Authorization头：

axios.interceptors.request.use( config => { if (store.state.token) { config.headers.Authorization = `token ${store.state.token}` } return config }, err => { return Promise.reject(err) }, )

如何使用该功能？

1. 克隆项目到本地：

git clone https://gitcode.com/gh_mirrors/vu/vue-axios-github

2. 项目中的401错误处理逻辑已经内置，只需按照正常流程使用axios发送请求即可享受自动的错误处理机制。

总结

vue-axios-github项目展示了如何使用Vuex和axios拦截器优雅地处理401错误。通过集中化的错误处理机制，不仅使代码结构更清晰，也大大提升了用户体验。这种实现方式可以作为大部分前后端分离项目处理认证错误的参考模板。

希望本文对你理解前端错误处理和状态管理有所帮助！如果有任何问题，欢迎在项目中提交issue交流探讨。

【免费下载链接】vue-axios-githubVue 全家桶 + axios 前端实现登录拦截、登出、拦截器等功能项目地址: https://gitcode.com/gh_mirrors/vu/vue-axios-github