Axios 实现登录拦截功能：完整代码、逻辑解析和性能优化建议

小小孩子们

发布于 2024-02-03 12:58:52

2290

发布于 2024-02-03 12:58:52

Axios 实现登录拦截功能：完整代码、逻辑解析和性能优化建议

请求拦截器

Axios是一个流行的基于Promise的HTTP客户端库，可以用于浏览器和Node.js中进行HTTP请求。Axios提供了拦截器(interceptors)机制，可以在请求发送前或响应返回后对请求和响应进行处理。拦截器是Axios中非常强大和灵活的功能，可以让开发者方便地处理请求和响应的各种情况。

对于登录拦截，通常情况下我们需要在每个需要登录才能访问的请求中检查用户是否已登录。这种方式需要在每个请求中进行判断，非常麻烦。而使用Axios拦截器可以避免这种重复的工作，只需要在一个地方添加判断即可。

Axios提供了两种拦截器：请求拦截器和响应拦截器。请求拦截器会在请求发送前执行，而响应拦截器会在响应返回后执行。对于登录拦截，我们可以使用请求拦截器来实现。

下面是一个使用Axios请求拦截器来实现登录拦截的详细步骤：

1. 导入Axios

首先，需要导入Axios模块，可以使用以下代码进行导入：

import axios from 'axios';

2. 添加请求拦截器

然后，我们需要使用Axios的interceptors对象添加请求拦截器。可以使用以下代码：

axios.interceptors.request.use(
  (config) => {
    // 在这里添加登录拦截逻辑
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

在上面的代码中，我们使用axios.interceptors.request.use方法来添加请求拦截器。该方法接收两个参数，第一个参数是一个函数，用于处理请求配置(config)。在这个函数中，我们可以添加登录拦截逻辑。如果用户已登录，则可以在请求头中添加令牌等信息。否则，我们可以在这里跳转到登录页面或者提示用户需要先登录才能访问该页面。最后，该函数需要返回请求配置(config)对象。

3. 处理请求错误

在添加请求拦截器的第二个参数中，我们还可以添加一个函数来处理请求错误。例如，如果在请求发送前发生了错误，我们可以在这个函数中处理这个错误，然后返回一个rejected状态的Promise。

4.超时拦截

在开发中，我们经常会遇到网络不稳定或者服务端响应慢的情况，这时候我们可以使用 Axios 提供的超时拦截功能，避免长时间等待而导致的页面卡死或者用户体验不佳的问题。

5. 代码示例

以下是一个完整的代码示例，其中包括了检查用户是否已登录、验证令牌是否过期、请求超时拦截等登录拦截的完整逻辑：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://example.com',
  timeout: 5000 // 设置请求超时时间
});

instance.interceptors.request.use(
  (config) => {
    // 检查用户是否已登录
    const token = localStorage.getItem('token')
    if (token) {
      // 验证令牌是否过期
      const decodedToken = JSON
      decodedToken = JSON.parse(atob(token.split('.')[1]))
      if (decodedToken.exp > Date.now() / 1000) {
        // 如果令牌未过期，则将令牌添加到请求头中
        config.headers.Authorization = Bearer ${ token };
      } else {
        // 如果令牌已过期，则提示用户需要重新登录
        window.alert('登录已过期，请重新登录！')
        window.location.href = '/login'
      }
    } else {
      // 如果用户未登录，则重定向到登录页面
      window.location.href = '/login'
    }
    return config
  },
  (error) => {
    // 请求响应发生错误时，进行拦截处理
    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
      // 如果请求超时，则中止该请求并显示一个错误消息
      console.log('请求超时，请重试！');
    }
    return Promise.reject(error)
  }
)

export default axios

在上面的代码中，我们首先在Axios中添加了请求拦截器。在请求拦截器的函数中，我们首先从本地存储中获取用户的访问令牌(token)，然后使用JSON.parse和atob方法将令牌解码，获取令牌中的信息。接着，我们判断令牌是否已过期，如果未过期，则将令牌添加到请求头中。否则，我们提示用户需要重新登录，然后重定向到登录页面。

需要注意的是，上面的代码示例仅供参考，实际开发中需要根据具体情况进行调整和优化。同时，在客户端中进行登录拦截是为了提高用户体验和安全性，但是在实际开发中，为了保证系统的安全性，还需要在服务端进行登录拦截和验证。

移除请求拦截器

在使用Axios进行拦截的开发中，有时候需要移除某个拦截器，例如在某个页面中不需要登录拦截等场景。可以使用Axios提供的eject方法来移除拦截器。

Axios拦截器使用interceptors对象来进行管理，该对象包含了request和response两个属性，分别代表请求和响应拦截器。每个属性都是一个包含拦截器数组的对象，数组中的每个元素都是一个拦截器。我们可以使用use方法添加拦截器，使用eject方法移除拦截器。

以下是一个使用eject方法移除Axios拦截器的示例代码：

import axios from 'axios';

// 添加拦截器
const interceptorId = axios.interceptors.request.use((config) => {
  // 在这里添加拦截逻辑
  return config;
});

// 移除拦截器
axios.interceptors.request.eject(interceptorId);

在上面的代码中，我们首先使用axios.interceptors.request.use方法添加一个请求拦截器，并将其保存在一个变量中。然后，我们使用axios.interceptors.request.eject方法来移除这个拦截器。该方法接收一个拦截器的ID作为参数，该ID就是添加拦截器时返回的结果。通过该ID可以唯一确定要移除的拦截器。

需要注意的是，如果要移除多个拦截器，需要调用eject方法多次，每次传入对应的拦截器ID即可。同时，如果要移除的拦截器不存在，eject方法会忽略该请求，不会抛出错误。