前端如何在请求头添加token

前端在请求头添加token时，可以使用多种方法，包括在每个请求中手动添加、使用拦截器自动添加以及通过统一配置设置。添加token的最佳实践主要包括：手动添加、使用拦截器、统一配置。以下将详细介绍如何在实际开发中实现这些方法，并讨论它们的优缺点和适用场景。

一、手动添加token

手动添加token是最直接的方法，适用于简单的小项目或需要灵活控制每个请求的情况。

1、基础知识

在前端开发中，最常用的HTTP请求库是axios和fetch。这两种库都可以方便地在请求头中添加token。

2、使用fetch添加token

fetch是原生的JavaScript API，用于进行网络请求。你可以在请求头中添加token，如下所示：

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

3、使用axios添加token

axios是一个流行的HTTP请求库，支持Promise API。你可以在请求头中添加token，如下所示：

import axios from 'axios';
axios.get('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

二、使用拦截器自动添加token

如果你的项目中有大量的HTTP请求，手动添加token可能会变得繁琐且容易出错。此时，可以使用拦截器来自动为每个请求添加token。

1、axios拦截器

axios提供了请求和响应拦截器，可以在请求发送前和响应接收后进行处理。下面是一个使用请求拦截器自动添加token的示例：

import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'Content-Type': 'application/json'}
});
// 添加请求拦截器
instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config;
}, error => {
  return Promise.reject(error);
});
// 发送请求
instance.get('/data')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

2、fetch拦截器

虽然fetch没有内置的拦截器功能，但可以通过封装一个函数来实现类似的效果：

function fetchWithAuth(url, options = {}) {
  const token = localStorage.getItem('token');
  const headers = new Headers(options.headers || {});
  if (token) {
    headers.append('Authorization', 'Bearer ' + token);
  }
  return fetch(url, {
    ...options,
    headers
  });
}
// 发送请求
fetchWithAuth('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

三、统一配置设置token

如果你使用的是一个大型的前端框架，如React、Vue或Angular，可以通过统一配置的方式在应用初始化时设置token。这种方法适用于所有请求都需要token的情况。

1、在React中设置token

在React应用中，可以使用axios配置来设置token。通常会在应用初始化时进行配置，如在App.js或index.js中：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import axios from 'axios';
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
axios.defaults.headers.post['Content-Type'] = 'application/json';
ReactDOM.render(<App />, document.getElementById('root'));

2、在Vue中设置token

在Vue应用中，可以在main.js中进行axios配置：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token');
axios.defaults.headers.post['Content-Type'] = 'application/json';
Vue.prototype.$http = axios;
new Vue({
  render: h => h(App),
}).$mount('#app');

3、在Angular中设置token

在Angular应用中，可以使用HttpInterceptor来全局添加token。首先，创建一个拦截器：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token');
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }
    return next.handle(request);
  }
}

然后，在app.module.ts中提供这个拦截器：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { TokenInterceptor } from './token.interceptor';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

四、管理token的最佳实践

在实际项目中，token的管理是非常重要的，因为它直接关系到应用的安全性和用户体验。以下是一些最佳实践建议：

1、存储token

token通常存储在浏览器的localStorage或sessionStorage中。建议使用localStorage，因为它具有持久化特性，即使浏览器关闭后仍然存在。但需要注意的是，localStorage中的数据是明文存储的，因此必须确保token的安全性。

// 存储token
localStorage.setItem('token', 'your-token-here');
// 获取token
const token = localStorage.getItem('token');
// 删除token
localStorage.removeItem('token');

2、token的刷新

token通常有一定的有效期，当token过期时，用户需要重新登录或通过刷新token来获取新的token。刷新token的机制可以在拦截器中实现，当检测到401 Unauthorized错误时，可以自动发送刷新token请求。

instance.interceptors.response.use(response => {
  return response;
}, error => {
  const originalRequest = error.config;
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    return axios.post('/auth/refresh-token', {
      token: localStorage.getItem('refreshToken')
    })
    .then(res => {
      if (res.status === 200) {
        localStorage.setItem('token', res.data.token);
        originalRequest.headers['Authorization'] = 'Bearer ' + res.data.token;
        return axios(originalRequest);
      }
    });
  }
  return Promise.reject(error);
});

3、保护敏感数据

尽量不要在浏览器端存储敏感数据，如用户密码、个人信息等。如果必须存储，建议使用加密技术进行保护。同时，要确保后端接口的安全性，防止token被窃取。

五、常见问题和解决方案

在实际开发中，可能会遇到一些常见问题，以下是一些解决方案：

1、跨域问题

在进行跨域请求时，浏览器会发送预检请求（OPTIONS请求），此时需要确保服务器正确处理预检请求，并返回相应的CORS头部。

// 服务器端的CORS配置示例（Node.js + Express）
const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Methods', 'PUT, POST, PATCH, DELETE, GET');
    return res.status(200).json({});
  }
  next();
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2、token的安全性

为了确保token的安全性，建议在传输过程中使用HTTPS加密。同时，可以在token中加入一些额外的信息，如用户ID、角色等，以便在服务器端进行校验。

// 生成token时加入用户信息（Node.js + jsonwebtoken）
const jwt = require('jsonwebtoken');
const token = jwt.sign({
  userId: user._id,
  role: user.role
}, 'your-secret-key', { expiresIn: '1h' });

3、处理token失效

当token失效时，用户需要重新登录或刷新token。在前端，可以通过拦截器检测到401错误，并跳转到登录页面或发送刷新token请求。

instance.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // 跳转到登录页面
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

六、总结

在前端添加token到请求头中是一个常见的需求，通过手动添加、使用拦截器和统一配置等方法可以有效地实现这一功能。在实际项目中，选择合适的方法和策略，结合最佳实践，确保token的安全性和用户体验。同时，合理管理和处理token的存储、刷新和失效等问题，可以为前端开发带来更高的效率和更好的代码质量。通过这些方法和实践，可以更好地保护用户数据，提升应用的安全性和可靠性。