vue攔截器及請求封裝代碼
更新時(shí)間：2024年08月30日 14:39:17 作者：接口文帝
這篇文章主要介紹了vue攔截器及請求封裝代碼,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項(xiàng)目的src文件夾中創(chuàng)建request文件夾
（1）request文件夾中創(chuàng)建index.js
(攔截器主要代碼)
/**
* 請求封裝
*/
import axios from 'axios';
import configUrl from './url.js';
// import store from '../store';
import cookies from "vue-cookies";
import router from "../router/index"
const service = axios.create({
baseURL: configUrl.baseURL,
// withCredentials: true, // 當(dāng)跨域請求時(shí)發(fā)送cookie
timeout: 50000 // 請求超時(shí)
});
//添加請求攔截器 請求接口統(tǒng)一添加token
service.interceptors.request.use(
config =>{
config.headers['PC-LOGIN-SESSION-ID'] = cookies.get('supplier_token')||''
// config.headers.PC-LOGIN-SESSION-ID = cookies.get('gys_token'); //請求添加token
return config;
},
error =>{
return Promise.reject(error);
}
)
// 響應(yīng)攔截器
service.interceptors.response.use(
response => {
//如果接口返回token，替換本地舊token
if (response.headers.token) {
sessionStorage.setItem("token", response.headers.token);
}
console.log('攔截器響應(yīng)',response)
//自定義設(shè)置后臺返回code對應(yīng)的響應(yīng)方式
if (response.data.code == 0) { // 請求成功
return response.data;
} else if(response.data.code == 100){ //token過期
router.app.$router.push({ path: '/login' })
return response.data;
// router.app.$router.replace('/login')
// return Promise.reject(new Error('登錄超時(shí)'));
// console.log(router)
}else{
return response.data;
}
// return response.data;
},
error => {
if (error.message) {
// this.$massage.error('服務(wù)器開小差了，請稍后再試!')
//錯誤響應(yīng)
alert('服務(wù)器開小差了，請稍后再試!')
}
return Promise.reject(error);
}
);
//暴露出封裝過的服務(wù)
export default service;（2）request文件夾下創(chuàng)建url.js文件
（域名地址的配置，按照不同環(huán)境請求域名不同）
const VUE_APP_MODE = process.env.VUE_APP_MODE;
let baseURL;
if (VUE_APP_MODE == 'development') { // 本地
baseURL = 'http://127.0.0.1:8888';//測試地址
} else {
// pre 預(yù)生產(chǎn)
// prod 生產(chǎn)
switch (VUE_APP_MODE) {
case 'test':// 測試
baseURL = 'http://test.com/api';
break;
case 'pre':// 預(yù)生產(chǎn)
baseURL = 'http://pre.com';
break;
case 'prod':// 生產(chǎn)
baseURL = 'http://prod.com';
break;
default:// 測試
baseURL = 'http://develop.api.center.tuanhaocai.com';
// baseURL = 'http://192.168.2.207:8088';//本地
break;
}
}
module.exports = {
baseURL
};（3）request文件夾下創(chuàng)建api.js文件
//引入上邊封裝的axios文件
import request from "@/request";
import qs from "qs";
// 用戶獲取驗(yàn)證碼
export const getCode = data => {
return request({
url: "/common/sms/send?"+qs.stringify(data),
method: "GET",
headers:{
"content-type": "application/json;charset=UTF-8"
},
});
};
// 用戶退出登錄
export const loginOut = data => {
return request({
url: "/supplier/user/logout?"+qs.stringify(data),
method: "GET",
headers:{
"content-type": "application/json;charset=UTF-8"
},
});
};
//用戶修改密碼 post請求
export const update_password = data => {
return request({
url: "/supplier/user/updatePassword",
method: "POST",
headers:{
"content-type": "application/json;charset=UTF-8"
},
data
});
};
//用戶登錄（密碼登錄） post請求
export const login_rq = data => {
return request({
url: "/supplier/user/loginForPas",
method: "POST",
headers:{
"content-type": "application/json;charset=UTF-8"
},
data
});
};
//用戶登錄（驗(yàn)證碼登錄） post請求
export const login_code = data => {
return request({
url: "/supplier/user/loginForCode",
method: "POST",
headers:{
"content-type": "application/json;charset=UTF-8"
},
data
});
};
//下載用戶上傳模板 get請求
export const downLoadTemplate = params=> {
return request({
url: "/user/info/template",
method: "GET",
headers:{
"content-type": "application/json;charset=UTF-8"
},
params
});
};（4）補(bǔ)充說明啟動環(huán)境問題
（request文件夾下創(chuàng)建url.js文件如何配置啟動環(huán)境不同域名不同問題）
在配置文件package.json中配置啟動命令（可以自己隨意起名）
"scripts": {
"serve": "vue-cli-service serve --open",
"dev": "vue-cli-service serve --open --mode dev",
"test": "vue-cli-service build --mode test",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},示例圖：
以上配置完以后需要在項(xiàng)目根目錄增加自定義啟動文件配置 (如配置文件中有"test": “vue-cli-service build --mode test”,則要增加.env.test)
如圖示例：
.env.test文件中代碼如下：
NODE_ENV='test' VUE_APP_MODE='test'
<-------引用------->
import { loginOut, update_password } from "@/request/api";
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.x數(shù)組劫持原理的實(shí)現(xiàn)
這篇文章主要介紹了vue2.x數(shù)組劫持原理的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue+elementUI實(shí)現(xiàn)動態(tài)展示列表的數(shù)據(jù)
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)動態(tài)展示列表的數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue無限輪播插件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
虛擬列表用來解決大數(shù)據(jù)量數(shù)據(jù)渲染問題,由于一次性渲染性能低,所以誕生了虛擬列表渲染,下面我們就來學(xué)習(xí)一下不同場景下Vue中虛擬列表是如何實(shí)現(xiàn)的吧2023-10-10
這篇文章主要介紹了vue項(xiàng)目做屏幕自適應(yīng)處理方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue-cli2與vue-cli3在一臺電腦共存的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli2與vue-cli3在一臺電腦共存的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
修改vue源碼實(shí)現(xiàn)動態(tài)路由緩存的方法
這篇文章主要介紹了修改vue源碼實(shí)現(xiàn)動態(tài)路由緩存的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時(shí)候?qū)魅氲闹底雠袛?，今天小編通過一個小例子給大家分享VueJs組件prop驗(yàn)證簡單理解，感興趣的朋友一起看看吧2017-09-09
Vue提供了一種更通用的方式來觀察和響應(yīng)當(dāng)前活動的實(shí)例上的數(shù)據(jù)變動:偵聽屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3.0多種偵聽方式的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue中使用window.open()參數(shù)示例詳解
這篇文章主要介紹了vue中使用window.open()參數(shù)詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04