前端如何将Token加到请求头?

发布时间：2023-05-17

在前后端分离的应用中，前端需要使用Token来进行用户认证和权限控制。通常情况下，前端会将Token存储在Cookie或本地存储中，但是每次需要发送请求的时候都需要将Token放到请求头中，这样才能保证后端能够正确地识别用户身份。下面将从多个方面进行讲解。

一、前端每次请求都带Token

每个请求都需要携带Token是很麻烦的，因为这会导致代码冗余，而且如果忘记添加Token也会导致请求失败。因此，我们可以使用拦截器来自动添加Token，避免每次都手动添加。

//定义一个拦截器
const request = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000 * 60,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
});
//添加一个请求拦截器
request.interceptors.request.use(
  config => {
    //从本地存储中获取Token
    const token = localStorage.getItem('token');
    if (token) {
      //在请求头中携带Token
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);
//发送请求
request.post('/users', {
  name: 'John Doe',
  age: 30
});

二、前端Token放在请求头

一般情况下，我们可以将Token放到请求头的Authorization字段中，这是一种标准的方式。同时，为了防止Token被截取或者泄露，可以使用HTTPS协议进行加密传输。

//定义一个请求头
const headers = {
  'Content-Type': 'application/json;charset=UTF-8',
  'Authorization': `Bearer ${localStorage.getItem('token')}`
};
//发送请求
axios.get('/users', { headers });

三、前端携带Token发送请求

有些API需要进行跨域请求，这时候我们可以使用jsonp来发送请求。在发送请求的时候，我们可以使用jQuery的ajax函数来携带Token。

$.ajax({
  url: 'https://api.example.com/users',
  type: 'get',
  dataType: 'jsonp',
  jsonpCallback: 'callback',
  beforeSend: function(request) {
    //在请求头中携带Token
    request.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('token')}`);
  },
  success: function(data) {
    console.log(data);
  }
});

四、前端请求如何携带Token

在使用XMLHttpRequest或fetch发送请求时，我们需要手动添加Token到请求头中。

//使用XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/users');
xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('token')}`);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();
//使用fetch
fetch('https://api.example.com/users', {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
})
.then(response => response.json())
.then(data => console.log(data));

五、前端请求带Token

我们可以通过在请求中添加Token参数的方式来发送请求。不过，在将Token作为参数的时候，需要注意参数名和值的格式要与后端要求一致。

axios.get('/users', {
  params: {
    access_token: localStorage.getItem('token')
  }
});

总之，前端在发送请求时需要将Token添加到请求头中，这样才能保证后端能够正确识别用户身份。我们可以使用拦截器、请求头、携带Token等多种方式来实现。

推荐文章