raex_pc/src/plugins/http.js

import axios from 'axios'
import qs from 'qs'
import { useStorage } from '@vueuse/core'

const baseURL = import.meta.env.VITE_HTTP_BASE_URL
const axiosInstance = axios.create({ baseURL, headers: { 'Accept-Language': 'en-US,en' } })

const token = useStorage('appToken', '', localStorage)
if (token.value) {
    axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + token.value
}

axiosInstance.interceptors.response.use(
    function (response) {
        return response
    },
    function (error) {
        let errorData = {}
        if (!error.response) {
            errorData = {
                error: 'Network Error'
            }
        } else {
            errorData = error.response.data
        }
        if (typeof errorData != 'object') {
            errorData = {
                error: 'Request failed: ' + error.response.status
            }
        }
        return Promise.reject(errorData)
    }
)

const http = {
    token,
    baseURL,
    resolve(path) {
        let base = baseURL
        if (!baseURL.startsWith('http')) {
            base = new URL(baseURL, window.location.origin).href
        }
        return new URL(path, base).href
    },
    setToken(_token) {
        token.value = _token
        if (_token) {
            axiosInstance.defaults.headers.common['Authorization'] = 'Bearer ' + _token
        } else {
            axiosInstance.defaults.headers.common['Authorization'] = null
        }
    },
    async login(phone, password) {
        let { data: token } = await axiosInstance.post('/auth/login', qs.stringify({ phone, password }))
        this.setToken(token)
    },
    get(url, params) {
        return new Promise((resolve, reject) => {
            axiosInstance
                .get(url, { params, withCredentials: true })
                .then(res => {
                    resolve(res.data)
                })
                .catch(e => {
                    reject(e)
                })
        })
    },
    post(url, body, options) {
        options = options || {}
        body = body || {}
        if (!(body instanceof FormData)) {
            if (options.body !== 'json') {
                body = qs.stringify(body)
            }
        }
        return new Promise((resolve, reject) => {
            axiosInstance
                .post(url, body, { withCredentials: true })
                .then(res => {
                    resolve(res.data)
                })
                .catch(e => {
                    reject(e)
                })
        })
    }
}

export default {
    install: app => {
        app.config.globalProperties.$http = http
        app.provide('http', app.config.globalProperties.$http)
    },
    http
}
export { http }