Axios設置token請求頭的三種方式

更新時間：2024年02月05日 08:59:55 作者：fortune_often_in

用戶登錄時,后端會返回一個token,并且保存到瀏覽器的localstorage中,可以根據localstorage中的token判斷用戶是否登錄,所以當發(fā)送請求時,都要攜帶token給后端進行判斷,本文給大家介紹了Axios設置token請求頭的三種方式,需要的朋友可以參考下

1、為什么要攜帶token?

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

2、Axios設置token請求頭的三種方式

第一種：配置前置攔截器（因為每次發(fā)送axios請求都要攜帶token信息，所以可以在main.js中進行全局配置）

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

import axios from 'axios'
//配置axios的全局基本路徑
axios.defaults.baseURL = 'http://localhost:8080';
//全局屬性配置，在任意組件內可以使用this.$http獲取axios對象
Vue.prototype.$http = axios



// 配置axios前置攔截器，作用是讓所有axios請求攜帶token，后臺需要token校驗是否登錄
axios.interceptors.request.use(config => {
  // 1.從緩存中獲取到token,這里的Authorization時登錄時你給用戶設置token的鍵值
  let authorization = localStorage.getItem("Authorization");
  // 2.如果token不為null，那么設置到請求頭中，此處哪怕為null，我們也不進行處理，因為后臺會進行攔截
  if (authorization) {
  //后臺給登錄用戶設置的token的鍵時什么，headers['''']里的鍵也應該保持一致
    config.headers['Authorization'] = authorization;
  }
  // 3.放行
  return config;
}, error => {
//失敗后拋出錯誤
  Promise.reject(error);
})

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

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}`  
    }  
});

到此這篇關于Axios設置token請求頭的三種方式的文章就介紹到這了,更多相關Axios設置token請求頭內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: