Vue

Vite TypeScript 請求攔截與響應攔截封裝

新增 axios/index.ts

引入import Axios, { AxiosRequestConfig, AxiosResponse, AxiosPromise } from ‘axios’;

请求攔截 axios.interceptors.request.use((config:any) => {return config;},(error)=>{return Promise.rejest(error);})

響應攔截 axios.interceptors.response.use((response) => {return response;},(error)=>{return Promise.rejest(error);})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import Axios, { AxiosRequestConfig, AxiosResponse, AxiosPromise } from 'axios';

const server = Axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
 // timeout: 15000,
 // withCredentials: config.apiConfig.withCredentials
})

// 请求攔截
axios.interceptors.request.use((config:any) => {

    //如果localStorage.token有數據，參閱知識點
    if ( localStorage.token ) {
        //解釋token的使用方式
        config.headers.Authorization=localStorage.token;

    }
    return config;
},
(error) => {
    return Promise.reject(error)
})

//響應攔截
axios.interceptors.response.use((response) => {
    // 這裡是對響應進行統一處理
    return response
},
(error) => {
     // 可以對錯誤進行統一處理
    if (error.response.status === 401) {
        localStorage.removeItem('token');
    }
   // console.log(error.response.status)
    return Promise.reject(error)
})

/**
 * 封装post请求,在api模塊直接調用
 *  -url 請求地址
 *  -params 參數
 *  -isQs 是否將參數序列化
 */
export const postApi = (url: string, params?: any, isQs?: boolean): AxiosPromise<any> => {
  return server({
    url,
    method: 'post',
    data: isQs ? stringify(params) : params
  })
}
/**
 * 封装get请求,在api模塊直接調用
 *  -url 請求地址
 *  -params 參數
 */

export const getApi = (url: string, query: any): AxiosPromise<any> => {
  return server({
    url,
    method: 'get',
    params: query
  })
}

/**
 * 封装put请求,在api模塊直接調用
 *  -url 請求地址
 *  -params 參數
 */

export const editApi = (url: string, params?: any, isQs?: boolean): AxiosPromise<any> => {
  return server({
    url,
    method: 'put',
    data: isQs ? stringify(params) : params
  })
}

/**
 * 封装delete请求,在api模塊直接調用
 *  -url 請求地址
 *  -id 參數
 */

export const removeApi = (url: string, id?: any, isQs?: boolean): AxiosPromise<any> => {
  return server({
    url,
    method: 'delete',
    data: isQs ? stringify(id) : id
  })
}

知識點

HTTP Token 使用方式: Basic Token v.s Bearer Token

使用Token的方式

1.使用Authorization HEADER:
Ex: Authorization: Bearer QQxhZGRpbjpvcGVuIHNlc2FtQQ==
2.使用Form Body:
不建議將Token加入Body，使用時 ，並使用GET 之外的 HTTP verbs (POST、DELETE、PUT)
HEADER: Content-Type: “application/x-www-form-urlencoded”
3.直接使用在URI :
一般來說不會使用這種方法，除非是Authorization header不支援，或者protect resource 支援該方法。
Ex: GET /resource?access_token=mF_9.B5f-4.1JqM HTTP/1.1

Token Response HTTP Response Status code 為200時代表成功

Basic Token: 當授權為「不」通過時，回傳401 code並告知哪個 Protect Scope 錯誤

Bearer Token: 當授權為「不」通過時，回傳400、401、403 code，並根據狀況回傳對應的錯誤。

創建api模塊管理所有的api接口

1
2
3
4
5
import { postApi } from '@/axios/index'

// 登入
export const Login = (params: any) => postApi('/auth/login', params, true)
export const Register = (params: any) => postApi('/auth/register', params, true)
github ts axios 封裝