前端如何將Token加到請求頭?

在前後端分離的應用中，前端需要使用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等多種方式來實現。