vue封裝axios自動帶上token

2021-10-17 23:24:01 字數 1413 閱讀 4143

在我們使用vue開發的時候,請求後台我們通常使用axios這些第三方庫來實現,但是我們在使用的時候,遇到乙個問題,我們每乙個請求都需要帶上token,這樣就增加了我們的重複工作量。

所以,我們可以對axios做乙個封裝,讓我們使用它的時候,自動帶入token和url的字首(url的字首生產環境和開發環境可以不同)

好了,直接上**:

import axios from 'axios'

import vue from 'vue';

import qs from 'qs';

//import store from '@/store';

import from 'element-ui';

import router from '@/router/index.js';

//import store from '@/store'

const service = axios.create()

// request interceptor

service.interceptors.request.use(

config =>

else if(config.isfile&&config.isfile===true)

else

} let token = sessionstorage.getitem("token");

if (token&&token!=='')

return config

},error =>

)// response interceptor

service.interceptors.response.use(res => else if (code !== 1) )

return promise.reject(res.data)

} else

},error => )

return promise.reject(error)})

export default service

使用的時候的呼叫方法:

//json的上傳格式:

request(,

isobj:true

}).then(res => );

//form表單的上傳格式:

request(

}).then(res => );

比如:

在.env.development中定義:

在.env.production中定義:

假如需要走**,可以在.env.development這樣定義

再在vue.config.js裡定義**

devserver: }},

disablehostcheck: true

},

vue專案封裝axios

還是直奔主題吧,因為官方不推薦使用vue resource,而是推薦axios,所以這篇文章分享給大家我在自己的專案裡如何封裝axios,雖說將axios在main.js裡寫入vue的原型鏈作為vue的屬性 vue.prototype.http axios 直接用最原始的方法也能進行請求 這樣也不是...

vue簡單封裝axios

1 在src下新建api資料夾,在api資料夾下新建config.js檔案 2 config.js配置如下 import axios from axios import qs from qs mint ui 框架,若不需要請全部注釋掉 import from mint ui axios.defaul...

vue 封裝axios請求

最近接手新的vue專案,發現axios竟然沒有封裝,立馬動手封裝,這裡記錄一下完整的封裝過程,廢話不說,直接上 baseconfig.js檔案 存放各個伺服器的位址 const express require express const proenv require pro.env 生產環境配置檔案...