1、為什么要攜帶token?

用戶登錄時(shí)，后端會返回一個(gè)token，并且保存到瀏覽器的localstorage中，可以根據(jù)localstorage中的token判斷用戶是否登錄，登錄后才有權(quán)限訪問相關(guān)的頁面，所以當(dāng)發(fā)送請求時(shí)，都要攜帶token給后端進(jìn)行判斷。

2、Axios設(shè)置token請求頭的三種方式

第一種：配置前置攔截器（因?yàn)槊看伟l(fā)送axios請求都要攜帶token信息，所以可以在main.js中進(jìn)行全局配置）

就是在發(fā)送axios請求之前將請求攔截，添加頭部信息后再發(fā)送請求

import axios from 'axios'
//配置axios的全局基本路徑
axios.defaults.baseURL = 'http://localhost:8080';
//全局屬性配置，在任意組件內(nèi)可以使用this.$http獲取axios對象
Vue.prototype.$http = axios// 配置axios前置攔截器，作用是讓所有axios請求攜帶token，后臺需要token校驗(yàn)是否登錄
axios.interceptors.request.use(config => {// 1.從緩存中獲取到token,這里的Authorization時(shí)登錄時(shí)你給用戶設(shè)置token的鍵值let authorization = localStorage.getItem("Authorization");// 2.如果token不為null，那么設(shè)置到請求頭中，此處哪怕為null，我們也不進(jìn)行處理，因?yàn)楹笈_會進(jìn)行攔截if (authorization) {//后臺給登錄用戶設(shè)置的token的鍵時(shí)什么，headers['''']里的鍵也應(yīng)該保持一致config.headers['Authorization'] = authorization;}// 3.放行return config;
}, error => {
//失敗后拋出錯誤Promise.reject(error);
})

第二種：設(shè)置defaults.headers.common來設(shè)置全局的請求頭

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

第三種：直接在請求中加

//get請求
axios.get('/api/data', {   headers: {   'Authorization': `Bearer ${token}`   }   
});
//post請求
axios.post('/api/data', {}, {  headers: {  'Authorization': `Bearer ${token}`  }  
});