实现“axios 401 去登录 记录当前路由”流程

前言

在前端开发中，经常会遇到需要处理用户登录状态的场景。当用户未登录或登录信息过期时，我们通常需要跳转到登录页，并在登录成功后返回原页面。本篇文章将教会你如何使用axios拦截器处理401错误，自动跳转到登录页并记录当前路由。

整体流程

步骤 描述
1 创建axios实例，并设置拦截器
2 定义一个全局变量记录当前路由
3 在路由跳转前，将当前路由存储到全局变量中
4 在拦截器中判断错误状态码，如果为401则跳转至登录页
5 在登录成功后，获取全局变量中的当前路由，并跳转至该路由

代码实现

第一步：创建axios实例，并设置拦截器

// 导入axios库
import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  // 设置基本的请求配置，如请求超时时间等
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理，例如添加请求头等
    return config;
  },
  (error) => {
    // 对请求错误做处理
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做处理
    return response;
  },
  (error) => {
    // 对响应错误做处理
    return Promise.reject(error);
  }
);

export default instance;

第二步：定义一个全局变量记录当前路由

// 在main.js或者入口文件中定义一个全局变量
window.currentRoute = null;

第三步：在路由跳转前，将当前路由存储到全局变量中

// 在路由跳转前的钩子函数中，将当前路由存储到全局变量中
router.beforeEach((to, from, next) => {
  // 将当前路由存储到全局变量中
  window.currentRoute = to;
  next();
});

第四步：在拦截器中判断错误状态码，如果为401则跳转至登录页

// 在响应拦截器中判断错误状态码
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做处理
    return response;
  },
  (error) => {
    // 判断错误状态码是否为401
    if (error.response && error.response.status === 401) {
      // 跳转至登录页
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

第五步：在登录成功后，获取全局变量中的当前路由，并跳转至该路由

// 在登录成功后的回调函数中，获取全局变量中的当前路由，并跳转至该路由
loginSuccessCallback() {
  // 获取全局变量中的当前路由
  const currentRoute = window.currentRoute;
  if (currentRoute) {
    // 跳转至当前路由
    router.push(currentRoute);
  } else {
    // 跳转至默认页面
    router.push('/');
  }
}

总结

通过以上步骤，我们成功实现了使用axios拦截器处理401错误，自动跳转到登录页并记录当前路由的功能。在开发中，可以根据实际情况对拦截器进行扩展，例如添加token刷新机制等。希望本文能帮助到你，欢迎提出意见和建议，共同进步！