拦截器-请求路径跳转至/error

本文详细介绍了当SpringBoot接口请求被错误地导向到/error时,如何通过检查请求路径来识别这一现象。问题源于使用excludePathPatterns()配置时,未存在的接口会触发SpringBoot转向/error页面。解决方法是将/error排除在拦截器之外,以避免拦截并直接返回404错误。此解决方案有助于优化错误处理流程和提升应用性能。

1. 现象

请求接口地址转到/error,进入拦截器

2. 检查是否跳转至/error

  request.getRequestURI() 可获取当前请求路径

3. 出现原因

  使用excludePathPatterns() 放行时,放行的接口不存在,springboot会转至/error,从而进入拦截器

4. 解决办法

excludePathPatterns("/error") 放行/error,/error不会进入拦截器,直接返回404 

<think>好的,用户的问题是关于如何在Axios拦截器中实现路径跳转,特别是针对Vue、React或纯JavaScript项目。我需要先理解Axios拦截器的基本用法,然后看看如何在请求或响应拦截器中加入跳转逻辑。 首先,拦截器分为请求拦截器和响应拦截器请求拦截器通常用于添加请求头,比如认证的token,而响应拦截器处理响应数据或错误。用户提到的路径跳转,可能是在遇到特定状态码(如401未授权)时跳转到登录页面。 接下来,我需要回忆一下之前学过的Axios拦截器配置。例如,在响应拦截器中检查响应状态,如果是401,则清除本地存储的token,并重定向到登录页面。不过,前端框架如Vue和React的路由跳转方式不同,需要分别处理。 对于Vue项目,通常使用vue-router的router.push方法进行跳转,但拦截器可能在普通JS文件中,无法直接访问router实例。这时候可能需要引入router或者使用全局变量。React项目类似,使用react-router-dom的useHistory或history对象进行跳转,同样要考虑如何在拦截器中访问路由方法。 另外,在纯JavaScript项目中,可能需要使用window.location.href来进行跳转,这种方法不依赖任何框架,但用户体验可能不如前端路由平滑。 需要注意的是,在拦截器中处理异步操作时,比如跳转前可能有弹窗提示,要确保逻辑正确,避免阻塞请求流程。同时,错误处理部分要用Promise.reject(error)将错误继续抛出,以便在具体的请求中还能捕获处理。 还要考虑如何封装拦截器,使其模块化,便于维护。例如,将拦截器的配置单独放在一个文件中,然后在创建Axios实例后批量应用这些拦截器。 最后,可能需要处理多个拦截器的执行顺序问题,以及确保在跳转后取消后续的请求处理,避免不必要的操作。 总结下来,步骤大致是:创建Axios实例,配置响应拦截器,检查错误状态码,执行跳转逻辑,并处理好框架特定的路由方法引入问题。同时要给出不同框架下的具体示例,方便用户参考。</think>在 Axios 拦截器中实现路径跳转,主要通过响应拦截器处理特定状态码(如 401 未授权)触发跳转逻辑。以下是具体实现方法: --- ### 一、核心实现步骤(通用 JavaScript) ```javascript // 创建 axios 实例 const axiosInstance = axios.create({ baseURL: 'https://api.example.com' }); // 响应拦截器 axiosInstance.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { // 清除 token 等认证信息 localStorage.removeItem('token'); // 路径跳转(纯 JS) window.location.href = '/login'; } return Promise.reject(error); } ); ``` --- ### 二、框架适配方案 #### 1. Vue 项目(使用 vue-router) ```javascript // utils/http.js import router from '@/router'; // 引入路由实例 const http = axios.create({ baseURL: 'https://api.example.com' }); http.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { router.push('/login'); // 使用 vue-router 跳转[^4] } return Promise.reject(error); } ); ``` #### 2. React 项目(使用 react-router-dom) ```javascript // utils/http.js import { createBrowserHistory } from 'history'; const history = createBrowserHistory(); // 创建 history 对象 const http = axios.create({ baseURL: 'https://api.example.com' }); http.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { history.push('/login'); // 通过 history 跳转 } return Promise.reject(error); } ); ``` --- ### 三、扩展场景处理 #### 1. 跳转前弹窗提示 ```javascript http.interceptors.response.use( (response) => response, async (error) => { if (error.response?.status === 401) { await showLogoutModal(); // 自定义弹窗逻辑 router.push('/login'); } return Promise.reject(error); } ); ``` #### 2. 多状态码处理 ```javascript http.interceptors.response.use( (response) => response, (error) => { const { status } = error.response; switch (status) { case 401: router.push('/login'); break; case 403: router.push('/no-permission'); break; case 500: router.push('/server-error'); break; } return Promise.reject(error); } ); ``` --- ### 四、注意事项 1. **避免循环跳转** 若登录页也需要认证检查,需在拦截器中添加白名单过滤: ```javascript if (error.config.url.includes('/login')) return; ``` 2. **异步跳转处理** 使用 `window.location.href` 会触发页面刷新,而前端路由跳转(如 `router.push`)是无刷新的单页应用跳转。 3. **拦截器执行顺序** 多个响应拦截器按添加顺序**逆序执行**(后添加的先执行),需注意逻辑依赖关系。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值