vue+axios全局添加請求頭和參數(shù)操作
走登錄的接口都會返回一個token值,然后存起來方便之后調(diào)接口的時候給后臺傳過去,傳給后臺的方式有兩種:(具體使用哪種需要和后臺商量)
1、放在請求頭中
2、放在接口的參數(shù)中
1、放在請求頭中
下面代碼是從本地cookie中拿token
VueCookie:一個用于處理瀏覽器cookies的簡單Vue.js插件.
// 在封裝axios的文件中添加攔截器 // 添加請求攔截器,在請求頭中加token service.interceptors.request.use( config => { // 判斷本地的cookie中是否有token if (VueCookie.isKey('token')) { config.headers.Authorization = VueCookie.get('token') } else { // 跳轉(zhuǎn)到登錄頁面(這里使用router,是因為路由文件引入到了此文件里) router.push('/login') } return config }, error => { return Promise.reject(error) })
這個時候雖然在請求頭中放了token,但是后臺并拿不到token的值,我們需要在創(chuàng)建axios對象的時候允許請求攜帶cokie,也可以加到main.js全局里面。
// 放在請求文件中 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ù)中
以下代碼是從本地存儲localStorage中拿token
// 添加請求攔截器,在參數(shù)中加token service.interceptors.request.use( config => { // 將token添加到每一個接口的參數(shù)中 // 判斷請求的類型:如果是post請求就把默認(rèn)參數(shù)拼到data里面;如果是get請求就拼到params里面 const token = localStorage.getItem('ISTOKEN') if (localStorage.getItem('ISTOKEN')) { // 注意:config.method 的判斷值必須是小寫的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)到登錄頁面(這里使用router,是因為路由文件引入到了此文件里) router.push('/login') } return config }, error => { return Promise.reject(error) })
補(bǔ)充知識:Vue,POST請求頭'Content-Type':'application/json;',data上傳方法
如下所示:
transformRequest 方法說明axios中文文檔
以上這篇vue+axios全局添加請求頭和參數(shù)操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue過濾器filters的用法及時間戳轉(zhuǎn)換問題
Vue的filters過濾器是比較常見的一個知識點,下面我將結(jié)合時間戳轉(zhuǎn)換的例子帶你快速了解filters的用法,感興趣的朋友一起看看吧2021-09-09基于vue-cli3+typescript的tsx開發(fā)模板搭建過程分享
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開發(fā)模板,本文通過實例代碼截圖的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02vuex實現(xiàn)數(shù)據(jù)持久化的兩種方案
這兩天在做vue項目存儲個人信息的時候,遇到了頁面刷新后個人信息數(shù)據(jù)丟失的問題,在查閱資料后,我得出兩種解決數(shù)據(jù)丟失,使用數(shù)據(jù)持久化的方法,感興趣的小伙伴跟著小編一起來看看吧2023-08-08Vue+element 解決瀏覽器自動填充記住的賬號密碼問題
我們在做form表單的時候,會發(fā)現(xiàn),瀏覽器會自動的將我們之前保存的密碼,自動的填充到表單中input 為 type="password" 的框中,如何實現(xiàn)此功能呢,下面小編給大家介紹下,感興趣的朋友一起看看吧2019-06-06vue中g(shù)et和post請求的區(qū)別點總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中g(shù)et和post請求的區(qū)別點總結(jié)內(nèi)容,對此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12