js怎么拦截请求并加上token

在JavaScript中拦截请求并加上Token的方法主要有：使用拦截器中间件、重写原生fetch方法、利用Service Workers。其中，使用拦截器中间件是最常见且最易于实现的一种方法。通过中间件可以轻松管理所有的HTTP请求和响应，从而在请求头中添加Token。下面将详细描述这一方法。

一、使用拦截器中间件

1. Axios拦截器

Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。它提供了拦截器功能，允许在请求或响应被处理之前进行操作。

安装Axios

首先，你需要安装Axios：

npm install axios

配置Axios拦截器

import axios from 'axios';
// 创建一个新的Axios实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
});
// 添加请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，比如添加Token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 使用这个实例进行请求
axiosInstance.get('/protected-route')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

2. Fetch拦截器

如果你偏好使用原生的Fetch API，可以通过重写Fetch方法来实现请求拦截。

重写Fetch方法

const originalFetch = window.fetch;
window.fetch = async (input, init = {}) => {
  // 在这里添加Token
  const token = localStorage.getItem('token');
  if (token) {
    init.headers = {
      ...init.headers,
      'Authorization': `Bearer ${token}`
    };
  }
  // 调用原生fetch方法
  const response = await originalFetch(input, init);
  return response;
};
// 使用重写后的fetch方法
fetch('https://api.example.com/protected-route')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

二、利用Service Workers

Service Workers是运行在浏览器后台的一种脚本，能够拦截和处理网络请求。虽然这种方法较为复杂，但其功能更为强大。

安装和注册Service Worker

创建Service Worker文件

// sw.js
self.addEventListener('fetch', event => {
  event.respondWith(
    (async () => {
      const token = await getTokenFromStorage();
      const modifiedRequest = new Request(event.request, {
        headers: {
          ...event.request.headers,
          'Authorization': `Bearer ${token}`
        }
      });
      return fetch(modifiedRequest);
    })()
  );
});
async function getTokenFromStorage() {
  // 获取Token的方法，这里假设存储在localStorage
  return localStorage.getItem('token');
}

注册Service Worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered with scope:', registration.scope);
      })
      .catch(error => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

三、总结

在JavaScript中拦截请求并加上Token的三种主要方法分别是：使用拦截器中间件（如Axios）、重写原生Fetch方法、以及利用Service Workers。使用拦截器中间件是最常见且简便的方法，特别适合中小型项目。重写Fetch方法则适合那些偏好使用原生Fetch API的开发者。利用Service Workers则适合对网络请求有更高定制需求的大型项目。选择合适的方法可以使你的应用更具安全性和灵活性。

另外，如果你正在管理一个项目团队，建议使用研发项目管理系统PingCode，或通用项目协作软件Worktile，这些系统能有效提高团队协作效率。