快捷導(dǎo)航

Axios設(shè)置token請(qǐng)求頭的三種方式

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

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

1、為什么要攜帶token?

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

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

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

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

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



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

第二種：設(shè)置defaults.headers.common來(lái)設(shè)置全局的請(qǐng)求頭

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

第三種：直接在請(qǐng)求中加

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

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

您可能感興趣的文章: