前端如何每次请求携带token到头

在前端开发中，每次请求携带token到头的核心观点是：使用拦截器、设置请求头、存储Token、处理Token过期。

使用拦截器是确保每次请求都自动携带token的有效方法之一。拦截器可以在请求发出前自动添加token，而不需要开发者在每个请求中手动添加。具体操作步骤包括在拦截器中配置请求头，使得每次HTTP请求都能携带token，从而实现安全的认证和授权。

以下是如何实现的详细描述：在使用Axios等HTTP客户端库时，可以通过配置拦截器来自动添加token到每个请求的头部。首先，需要将token存储在本地存储（localStorage）或者会话存储（sessionStorage）中。然后，配置Axios拦截器，在每次请求发出前，从存储中获取token，并将其添加到请求头中。这样，每次请求都会自动携带token，确保API请求的安全性。

一、使用拦截器

使用拦截器可以自动在每次请求时添加token，避免手动重复添加。

配置拦截器

首先，需要配置拦截器。以Axios为例，首先安装Axios：

npm install axios

然后在项目的主文件（例如main.js或index.js）中配置拦截器：

import axios from 'axios';
// 创建Axios实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
});
// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
export default axiosInstance;

在上述代码中，拦截器会在每次请求发出前检查本地存储中是否有token，如果存在则将其添加到请求头中。

使用拦截器发送请求

在项目的其他部分，使用配置好的Axios实例发送请求：

import axiosInstance from './path/to/axiosInstance';
axiosInstance.get('/endpoint')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

这样，每次通过axiosInstance发送的请求都会自动携带token。

二、设置请求头

设置请求头是确保token被发送到服务器的关键步骤。

手动设置请求头

在某些情况下，你可能需要手动设置请求头。例如，在使用fetch API时，可以通过以下方式添加token：

const token = localStorage.getItem('token');
fetch('https://api.example.com/endpoint', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

这种方式适用于不使用拦截器的场景，但需要在每个请求中手动添加token。

使用封装函数设置请求头

为了减少重复代码，可以封装一个函数来处理请求头的设置：

function getAuthHeaders() {
  const token = localStorage.getItem('token');
  return {
    'Authorization': `Bearer ${token}`
  };
}
fetch('https://api.example.com/endpoint', {
  method: 'GET',
  headers: getAuthHeaders()
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

这样，通过调用封装函数，可以简化设置请求头的过程。

三、存储Token

Token的存储方式直接影响到其安全性和易用性。

本地存储（localStorage）

localStorage是一种常见的token存储方式。它的优点是简单易用，缺点是安全性较低，容易受到XSS攻击。

localStorage.setItem('token', 'your-token-here');
const token = localStorage.getItem('token');

会话存储（sessionStorage）

sessionStorage与localStorage类似，但其生命周期仅限于会话期间，关闭浏览器窗口后会被清除，安全性稍高。

sessionStorage.setItem('token', 'your-token-here');
const token = sessionStorage.getItem('token');

Cookie存储

将token存储在Cookie中，可以通过设置HttpOnly属性提高安全性，但Cookie在每次请求时都会被自动发送，可能增加带宽消耗。

document.cookie = "token=your-token-here; HttpOnly";

四、处理Token过期

Token过期处理是确保用户体验和安全性的重要环节。

检测Token过期

在每次请求中，服务器可能返回401 Unauthorized状态码，表示token已过期。可以在拦截器中处理这种情况：

axiosInstance.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理token过期，例如跳转到登录页面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

刷新Token

某些API提供了刷新token的功能，可以在token即将过期时调用刷新接口获取新的token：

function refreshToken() {
  return axiosInstance.post('/auth/refresh', {
    token: localStorage.getItem('refreshToken')
  })
    .then(response => {
      localStorage.setItem('token', response.data.token);
      return response.data.token;
    });
}

在请求失败时，可以尝试刷新token并重试请求：

axiosInstance.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      return refreshToken().then(newToken => {
        error.config.headers['Authorization'] = `Bearer ${newToken}`;
        return axiosInstance.request(error.config);
      });
    }
    return Promise.reject(error);
  }
);

五、使用PingCode和Worktile进行项目管理

在前端开发过程中，项目管理系统对于团队协作和任务管理至关重要。研发项目管理系统PingCode和通用项目协作软件Worktile是两个优秀的选择。

PingCode

PingCode是一款专为研发团队设计的项目管理系统，支持敏捷开发、迭代计划和需求管理等功能。

敏捷开发

PingCode提供了丰富的敏捷开发工具，例如看板和冲刺管理，帮助团队更高效地进行任务分配和进度跟踪。

需求管理

通过需求管理功能，团队可以轻松地收集、分析和跟踪用户需求，确保产品开发始终以用户需求为导向。

Worktile

Worktile是一款通用项目协作软件，适用于各种类型的团队和项目。

任务管理

Worktile的任务管理功能强大，支持任务分配、进度跟踪和优先级设置，帮助团队成员高效协作。

文档协作

Worktile还提供了文档协作功能，团队成员可以在平台上共同编辑和分享文档，提高协作效率。

通过使用拦截器、设置请求头、存储Token和处理Token过期，可以确保前端每次请求都携带token到头部，从而实现安全的认证和授权。同时，借助PingCode和Worktile等项目管理工具，可以提高团队协作效率，确保项目顺利进行。