快捷導(dǎo)航

Vue3請(qǐng)求攔截器里如何配置token

更新時(shí)間：2024年08月28日 17:14:38 作者：奔跑的小G

這篇文章主要介紹了Vue3請(qǐng)求攔截器里如何配置token,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue3請(qǐng)求攔截器配置token

// axios請(qǐng)求攔截器
httpInstance.interceptors.request.use(config => {
   console.log('請(qǐng)求攔截器',config);
   const userStore = useUserStore()
   const token = userStore.userInfo.token
   if(token){
   //固定寫(xiě)法
    config.headers.Authorization = `Bearer ${token}` 
    //注意Bearer后面的空格
   }
  return config
}, e => Promise.reject(e))

Vue3的axios請(qǐng)求封裝，請(qǐng)求攔截，相應(yīng)攔截

對(duì)于三者放在Service.js中封裝，方便使用

axios.create 的作用是創(chuàng)建一個(gè)新的 axios 實(shí)例，該實(shí)例可以具有自定義配置。

通過(guò)使用 axios.create，您可以為任何 API 生成一個(gè)客戶端，并在使用同一客戶端的任何調(diào)用中重復(fù)使用相同的配置。

這使得在應(yīng)用程序中使用多個(gè) API 時(shí)更加方便，因?yàn)槟梢詾槊總€(gè) API 創(chuàng)建一個(gè)單獨(dú)的實(shí)例，并在每個(gè)實(shí)例中設(shè)置不同的配置。

axios.create 方法接受一個(gè)配置對(duì)象作為參數(shù)，該對(duì)象包含以下屬性：

baseURL：用于所有請(qǐng)求的基本 URL。
headers：要發(fā)送的自定義 headers。
timeout：指定請(qǐng)求超時(shí)之前的毫秒數(shù)。
withCredentials：指示是否應(yīng)該使用跨站點(diǎn)訪問(wèn)控制（CORS）憑據(jù)。
xsrfCookieName：用作 xsrf 令牌值的cookie的名稱。
xsrfHeaderName：包含 xsrf 令牌值的 HTTP 頭的名稱。

例如，以下代碼創(chuàng)建了一個(gè)新的 axios 實(shí)例，并將其配置為使用 /api/ 作為基本 URL：

const instance = axios.create({
  baseURL: '/api/'
});

axios請(qǐng)求封裝

// 用create創(chuàng)建axios實(shí)例
const Service = axios.create({
    timeout: 3000,
    baseURL: 'http://127.0.0.1:8888/api/private/v1/',
    headers: { 'Content-type': 'application/json;charset=utf-8' }

})

// get 數(shù)據(jù)請(qǐng)求封裝
export const get = config => {
    return Service({
        ...config,
        method: 'get',
        data: config.data,
    })

}

// post 數(shù)據(jù)請(qǐng)求封裝
export const post = config => {
    return Service({
        ...config,
        method: 'post',
        data: config.data,
    })

}

請(qǐng)求攔截和響應(yīng)攔截

在 Vue3 中，可以使用 Axios 庫(kù)來(lái)進(jìn)行 HTTP 請(qǐng)求。Axios 庫(kù)提供了請(qǐng)求攔截器和響應(yīng)攔截器，以便在請(qǐng)求發(fā)送和響應(yīng)返回時(shí)執(zhí)行一些操作。

請(qǐng)求攔截器可以用于在請(qǐng)求發(fā)送前執(zhí)行一些操作，例如添加 token、設(shè)置請(qǐng)求頭等。響應(yīng)攔截器可以用于在響應(yīng)返回后執(zhí)行一些操作，例如處理錯(cuò)誤信息、剝離無(wú)效數(shù)據(jù)等。

let loadingObj = null;
// 請(qǐng)求攔截，增加loading，對(duì)請(qǐng)求統(tǒng)一處理
Service.interceptors.request.use((config) => {
    loadingObj = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    return config;
})


// 相應(yīng)攔截，對(duì)返回值做同意處理
Service.interceptors.response.use(response => {
    loadingObj.close();
    const data = response.data;
    if (!data.data) {
        ElMessage.error(data.meta.msg || '服務(wù)器錯(cuò)誤')
    }
    else {
        ElMessage({
            message: '登錄成功',
            type: 'success',
            duration: 1500
        })
    }
    return response.data;
}, error => {
    loadingObj.close();
    ElMessage({
        message: '服務(wù)器錯(cuò)誤',
        type: 'error',
        duration: 2000
    })
})

接口的請(qǐng)求

import { get, post } from './service'

// 登錄數(shù)據(jù)請(qǐng)求
export const loginAPI = data => {
    return post({
        url: '/login',
        data
    })

}