欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+axios全局添加請(qǐng)求頭和參數(shù)操作

 更新時(shí)間:2020年07月24日 11:31:35   作者:竹葉輕拂水  
這篇文章主要介紹了vue+axios全局添加請(qǐng)求頭和參數(shù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

走登錄的接口都會(huì)返回一個(gè)token值,然后存起來(lái)方便之后調(diào)接口的時(shí)候給后臺(tái)傳過(guò)去,傳給后臺(tái)的方式有兩種:(具體使用哪種需要和后臺(tái)商量)

1、放在請(qǐng)求頭中

2、放在接口的參數(shù)中

1、放在請(qǐng)求頭中

下面代碼是從本地cookie中拿token

VueCookie:一個(gè)用于處理瀏覽器cookies的簡(jiǎn)單Vue.js插件.

// 在封裝axios的文件中添加攔截器
// 添加請(qǐng)求攔截器,在請(qǐng)求頭中加token
service.interceptors.request.use(
 config => {
 // 判斷本地的cookie中是否有token
 if (VueCookie.isKey('token')) {
 config.headers.Authorization = VueCookie.get('token')
 } else {
 // 跳轉(zhuǎn)到登錄頁(yè)面(這里使用router,是因?yàn)槁酚晌募氲搅舜宋募?
 router.push('/login')
 }
 return config
 },
 error => {
 return Promise.reject(error)
 })

這個(gè)時(shí)候雖然在請(qǐng)求頭中放了token,但是后臺(tái)并拿不到token的值,我們需要在創(chuàng)建axios對(duì)象的時(shí)候允許請(qǐng)求攜帶cokie,也可以加到main.js全局里面。

// 放在請(qǐng)求文件中
const service = axios.create({
 baseURL: "http://XXXXXXXXX:XXXX",
 timeout: 10000,
 withCredentials: true // 允許攜帶cookie
});
// 放在全局main.js中
import axios from "axios";
axios.defaults.withCredentials = true; // 允許攜帶cookie

2、放在參數(shù)中

以下代碼是從本地存儲(chǔ)localStorage中拿token

// 添加請(qǐng)求攔截器,在參數(shù)中加token
service.interceptors.request.use(
 config => {
 // 將token添加到每一個(gè)接口的參數(shù)中
 // 判斷請(qǐng)求的類(lèi)型:如果是post請(qǐng)求就把默認(rèn)參數(shù)拼到data里面;如果是get請(qǐng)求就拼到params里面
 const token = localStorage.getItem('ISTOKEN')
 if (localStorage.getItem('ISTOKEN')) {
 // 注意:config.method 的判斷值必須是小寫(xiě)的post和get
 if (config.method === 'post') {
 config.data = {
  api_token: token,
  ...config.data
 }
 } else if (config.method === 'get') {
 config.params = {
  api_token: token,
  ...config.params
 }
 }
 } else {
 // 跳轉(zhuǎn)到登錄頁(yè)面(這里使用router,是因?yàn)槁酚晌募氲搅舜宋募?
 router.push('/login')
 }
 return config
 },
 error => {
 return Promise.reject(error)
 })

補(bǔ)充知識(shí):Vue,POST請(qǐng)求頭'Content-Type':'application/json;',data上傳方法

如下所示:

transformRequest 方法說(shuō)明axios中文文檔

以上這篇vue+axios全局添加請(qǐng)求頭和參數(shù)操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3 setup() 高級(jí)用法示例詳解

    vue3 setup() 高級(jí)用法示例詳解

    從 vue2 升級(jí)到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的選項(xiàng)式API。這篇文章主要介紹了vue3 setup() 高級(jí)用法,需要的朋友可以參考下
    2021-11-11
  • vue computed無(wú)法得到this的屬性或方法的解決

    vue computed無(wú)法得到this的屬性或方法的解決

    這篇文章主要介紹了vue computed無(wú)法得到this的屬性或方法的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • Vue過(guò)濾器filters的用法及時(shí)間戳轉(zhuǎn)換問(wèn)題

    Vue過(guò)濾器filters的用法及時(shí)間戳轉(zhuǎn)換問(wèn)題

    Vue的filters過(guò)濾器是比較常見(jiàn)的一個(gè)知識(shí)點(diǎn),下面我將結(jié)合時(shí)間戳轉(zhuǎn)換的例子帶你快速了解filters的用法,感興趣的朋友一起看看吧
    2021-09-09
  • 基于vue-cli3+typescript的tsx開(kāi)發(fā)模板搭建過(guò)程分享

    基于vue-cli3+typescript的tsx開(kāi)發(fā)模板搭建過(guò)程分享

    這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開(kāi)發(fā)模板,本文通過(guò)實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-02-02
  • vuex實(shí)現(xiàn)數(shù)據(jù)持久化的兩種方案

    vuex實(shí)現(xiàn)數(shù)據(jù)持久化的兩種方案

    這兩天在做vue項(xiàng)目存儲(chǔ)個(gè)人信息的時(shí)候,遇到了頁(yè)面刷新后個(gè)人信息數(shù)據(jù)丟失的問(wèn)題,在查閱資料后,我得出兩種解決數(shù)據(jù)丟失,使用數(shù)據(jù)持久化的方法,感興趣的小伙伴跟著小編一起來(lái)看看吧
    2023-08-08
  • Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問(wèn)題

    Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問(wèn)題

    我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中,如何實(shí)現(xiàn)此功能呢,下面小編給大家介紹下,感興趣的朋友一起看看吧
    2019-06-06
  • vue-router 4使用實(shí)例詳解

    vue-router 4使用實(shí)例詳解

    雖然 vue-router 4 大多數(shù) API 保持不變,但是在 vue3 中以插件形式存在,所以在使用時(shí)有一定的變化。接下來(lái)就學(xué)習(xí)學(xué)習(xí)它是如何使用的
    2021-11-11
  • vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果

    vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏效果

    這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)彈出框點(diǎn)擊顯示隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-04-04
  • vue中g(shù)et和post請(qǐng)求的區(qū)別點(diǎn)總結(jié)

    vue中g(shù)et和post請(qǐng)求的區(qū)別點(diǎn)總結(jié)

    在本篇文章里小編給大家分享的是一篇關(guān)于vue中g(shù)et和post請(qǐng)求的區(qū)別點(diǎn)總結(jié)內(nèi)容,對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)下。
    2021-12-12
  • Vue3屬性綁定方法解析

    Vue3屬性綁定方法解析

    這篇文章主要介紹了Vue3屬性綁定方法解析,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-09-09

最新評(píng)論