快捷導(dǎo)航

Vue3請求攔截器里如何配置token

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

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

Vue3請求攔截器配置token

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

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

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

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

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

這使得在應(yīng)用程序中使用多個 API 時更加方便，因為您可以為每個 API 創(chuàng)建一個單獨的實例，并在每個實例中設(shè)置不同的配置。

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

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

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

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

axios請求封裝

// 用create創(chuàng)建axios實例
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ù)請求封裝
export const get = config => {
    return Service({
        ...config,
        method: 'get',
        data: config.data,
    })

}

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

}

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

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

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

let loadingObj = null;
// 請求攔截，增加loading，對請求統(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)攔截，對返回值做同意處理
Service.interceptors.response.use(response => {
    loadingObj.close();
    const data = response.data;
    if (!data.data) {
        ElMessage.error(data.meta.msg || '服務(wù)器錯誤')
    }
    else {
        ElMessage({
            message: '登錄成功',
            type: 'success',
            duration: 1500
        })
    }
    return response.data;
}, error => {
    loadingObj.close();
    ElMessage({
        message: '服務(wù)器錯誤',
        type: 'error',
        duration: 2000
    })
})

接口的請求

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

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

}