vue中使用axios固定url請求前綴

更新時間：2022年12月09日 10:29:09 作者：Agwenbi

這篇文章主要介紹了vue中使用axios固定url請求前綴的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用axios固定url請求前綴

main.js中添加：

使用方法：

定義axios默認路徑前綴或動態(tài)修改前綴

如：每個請求url前都要加一個前綴,但會根據(jù)開發(fā)環(huán)境不同而變化,那么我們可以寫一個方法去引用,方便后面維護

.env.development 開發(fā)文件中寫入要用的服務編碼

# 微服務編碼
VUE_APP_SERVICE_PREFIX = '/0201010254'

src/settings.js 新建的settings文件中引入

module.exports = {
? /**
? ?* 主站標題
? ?* @type {string}
? ?*/
? title: '開發(fā)項目名稱',
?
? /**
? ?* @type {boolean} true | false
? ?* @description Whether fix the header
? ?*/
? fixedHeader: false,
?
? /**
? ?* @type {string | array} 'production' | ['production', 'development']
? ?* @description Need show err logs component.
? ?* The default is only used in the production env
? ?* If you want to also use it in dev, you can pass ['production', 'development']
? ?*/
? errorLog: 'production',
? /**
? ?* base API
? ?*/
? baseApi: process.env.VUE_APP_BASE_API,
? /**
? ?* 服務編碼
? ?*/
? servicePrefix: process.env.VUE_APP_SERVICE_PREFIX,
?
}

之后請求文件中引入

新建api/app.js 封裝axios請求并引用自定義的服務編碼文件

// 應用層封裝接口
import request from '@/utils/request'
import settings from '@/settings'
?
// 獲取配置 不需替換
export function getAppConfig(params) {
? return request({
? ? url: settings.servicePrefix + '/config',
? ? method: 'get',
? ? params
? })
}

其中的request文件是引用自建的請求攔截文件,根據(jù)各自需求

import axios from 'axios'
import store from '@/store'
import { getToken, removeToken } from '@/utils/auth'
?
const BASE_URL = process.env.VUE_APP_BASE_API
?
// create an axios instance
const service = axios.create({
? // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
? // withCredentials: true, // send cookies when cross-domain requests
? timeout: 60 * 1000 // request timeout
})
?
// request interceptors
service.interceptors.request.use(
? config => {
? ? // do something before request is sent
? ? // 設置baseURL
? ? config.baseURL = config.url.startsWith('/mock') ? '' : BASE_URL
? ? const token = getToken()
? ? if (!config.noAuth && token) {
? ? ? // let each request carry token
? ? ? config.headers['Authorization'] = token
? ? }
? ? if (store.state.user.info && store.state.user.info.comId) {
? ? ? config.headers['comId'] = store.state.user.info.comId
? ? ? config.headers['comCode'] = store.state.user.info.comCode
? ? ? config.headers['groupUserCode'] = store.state.user.info.groupUserCode
? ? ? config.headers['userCode'] = store.state.user.info.userCode
? ? }
? ? return config
? },
? error => {
? ? // do something with request error
? ? return Promise.reject(error)
? }
)
?
// response interceptor
service.interceptors.response.use(
? /**
? ?* If you want to get http information such as headers or status
? ?* Please return ?response => response
? ?*/
?
? /**
? ?* Determine the request status by custom code
? ?* Here is just an example
? ?* You can also judge the status by HTTP Status Code
? ?*/
? response => {
? ? if (response.headers.newjwt) {
? ? ? store.dispatch('user/setToken', response.headers.newjwt)
? ? }
? ? if ((response.data.status && +response.data.status === 16) || response.status === 401) {
? ? ? if (response.status === 401) {
? ? ? ? return Promise.reject('沒有接口權限，請聯(lián)系管理員')
? ? ? } else {
? ? ? ? setTimeout(() => {
? ? ? ? ? // 清除登錄狀態(tài)
? ? ? ? ? removeToken()
? ? ? ? ? window.location.href = '/'
? ? ? ? }, 1000)
? ? ? ? return Promise.reject('登錄超時，請重新登錄')
? ? ? }
? ? }
? ? if (response.config.handleResponse) {
? ? ? return response
? ? } else {
? ? ? const { head, body } = response.data
? ? ? // 舊數(shù)據(jù)格式分為head和body兩部分，現(xiàn)在使用ApiResponse不會再出現(xiàn)這兩部分，此處為兼容舊格式的臨時方案
? ? ? if (head && body) {
? ? ? ? // 正常返回
? ? ? ? if (+head.code === 1) {
? ? ? ? ? return body
? ? ? ? } else {
? ? ? ? ? return Promise.reject(head.msg || '未知錯誤')
? ? ? ? }
? ? ? } else {
? ? ? ? const { status, statusText, data } = response.data
? ? ? ? if (+status === 0) {
? ? ? ? ? return data
? ? ? ? } else {
? ? ? ? ? if (response.config.handleError) {
? ? ? ? ? ? return Promise.reject(response.data)
? ? ? ? ? } else {
? ? ? ? ? ? return Promise.reject(statusText || '未知錯誤')
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? },
? error => {
? ? // 非取消請求
? ? if (!axios.isCancel(error)) {
? ? ? // 401無權限判斷
? ? ? if (error.response && error.response.status === 401) {
? ? ? ? return Promise.reject('沒有接口權限，請聯(lián)系管理員')
? ? ? } else if (error.response && error.response.status === 531) {
? ? ? ? setTimeout(() => {
? ? ? ? ? // 清除登錄狀態(tài)
? ? ? ? ? removeToken()
? ? ? ? ? window.location.href = '/'
? ? ? ? }, 1000)
? ? ? ? return Promise.reject('登錄超時，請重新登錄')
? ? ? }
? ? }
? ? return Promise.reject(error)
? }
)
?
export default service

request.js中把token內容抽離出來方便管理

src下新建/utils/auth.js

import Cookies from 'js-cookie'
?
const TokenKey = 'Admin-Token'
?
export function getToken() {
? return Cookies.get(TokenKey)
}
?
export function setToken(token) {
? if (!token || token === 'null') {
? ? return
? }
? sessionStorage.setItem('jwt', token)
? return Cookies.set(TokenKey, token)
}
?
export function removeToken() {
? return Cookies.remove(TokenKey)
}

最終頁面使用axios

import { getAppConfig } from '@/api/app'
//請求
?const params = {}
? ? ? ? getAppConfig(params).then(res => {
? ? ? ? ? this.loading = false
? ? ? ? ? console.log(res)
? ? ? ? }).catch(e => {
? ? ? ? ? this.loading = false
? ? ? ? ? this.$message.error(e.toString())
? ? ? ? })