feat: ✨ 请求拦截暴露

dizuncainiao · May 11, 2023 · 880fdf2 · 880fdf2
1 parent 676be92
commit 880fdf2
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 12 deletions.
diff --git a/examples/src/main.ts b/examples/src/main.ts
@@ -2,5 +2,15 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import 'bi-chart/style/index.css'
+import { initRequestInterceptors } from 'bi-chart'
+
+function getToken() {
+  return 'eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJiZHNhYXMiLCJzdWIiOiI2NzA5OCIsImV4cCI6MTY4Mzc5ODU5MH0.azt8JcpjhLMZHNBDrXAoVyVFyNIZts08mdaY37m6tsaU0QaVG0HSk8ihOFsbRw_18XPVn7P24SMJmA4B66SAGQ'
+}
+
+initRequestInterceptors(config => {
+  config.headers.Authorization = `Bearer ${getToken()}`
+  return config
+})
 
 createApp(App).mount('#app')
diff --git a/packages/bi-chart/_plugins/axios-http/http.ts b/packages/bi-chart/_plugins/axios-http/http.ts
@@ -1,4 +1,8 @@
-import axios, { AxiosRequestConfig, AxiosInstance } from 'axios'
+import axios, {
+  AxiosRequestConfig,
+  AxiosInstance,
+  InternalAxiosRequestConfig
+} from 'axios'
 import { CreateAxiosDefaults } from 'axios'
 import qs from 'qs'
 
@@ -8,6 +12,10 @@ type ResponseDataWrapper<T = any> = {
   msg: string
 }
 
+export type RequestInterceptors = (
+  args: InternalAxiosRequestConfig
+) => InternalAxiosRequestConfig
+
 export default class AxiosHttp {
   private readonly axiosInstance: AxiosInstance
 
@@ -16,15 +24,27 @@ export default class AxiosHttp {
     this.initInterceptors()
   }
 
-  initInterceptors() {
+  // 暴露给外部的请求拦截器
+  requestInterceptors(callback: RequestInterceptors) {
     this.axiosInstance.interceptors.request.use(
       config => {
-        return config
+        return callback(config)
       },
       error => {
         return Promise.reject(error)
       }
     )
+  }
+
+  private initInterceptors() {
+    // this.axiosInstance.interceptors.request.use(
+    //   config => {
+    //     return config
+    //   },
+    //   error => {
+    //     return Promise.reject(error)
+    //   }
+    // )
 
     this.axiosInstance.interceptors.response.use(config => {
       // 状态 200 且 data 正常有值

diff --git a/packages/bi-chart/_plugins/axios-http/index.ts b/packages/bi-chart/_plugins/axios-http/index.ts
@@ -1,8 +1,12 @@
-import AxiosHttp from './http'
+import AxiosHttp, { RequestInterceptors } from './http'
 
 const http = new AxiosHttp({
   baseURL: '',
   timeout: 60 * 1000
 })
 
+export const initRequestInterceptors = (callback: RequestInterceptors) => {
+  http.requestInterceptors(callback)
+}
+
 export default http
diff --git a/packages/bi-chart/components/basic-business-layout/BasicBusinessLayout.vue b/packages/bi-chart/components/basic-business-layout/BasicBusinessLayout.vue
@@ -44,10 +44,6 @@ export default defineComponent({
     params: {
       type: Object as PropType<Record<string, unknown>>,
       default: () => ({
-        token:
-          'eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJiZHNhYXMiLCJzdWIiOiI2NzA5OCIsImV4cCI6MTY4MzczMjY4N30.6lCwxodyJIRGArFZeIfP-v-6DrCX7XPJFmX113Vr6E9Px0S-xPb0TpWeZivff5HlqMHhXAWo4KxIfjg8WyK7BQ',
-        COMPANYID: '3263',
-        companyId: '3263',
         endTime: '',
         profileId: '67098',
         startTime: '',
@@ -65,10 +61,10 @@ export default defineComponent({
 
     function getData() {
       http[method.value](url.value, params.value, {
-        headers: {
-          Authorization:
-            'Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJiZHNhYXMiLCJzdWIiOiI2NzA5OCIsImV4cCI6MTY4MzczMjY4N30.6lCwxodyJIRGArFZeIfP-v-6DrCX7XPJFmX113Vr6E9Px0S-xPb0TpWeZivff5HlqMHhXAWo4KxIfjg8WyK7BQ'
-        }
+        // headers: {
+        //   Authorization:
+        //     'Bearer eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiJiZHNhYXMiLCJzdWIiOiI2NzA5OCIsImV4cCI6MTY4MzczMjY4N30.6lCwxodyJIRGArFZeIfP-v-6DrCX7XPJFmX113Vr6E9Px0S-xPb0TpWeZivff5HlqMHhXAWo4KxIfjg8WyK7BQ'
+        // }
       }).then(res => {
         options.value.series[0].data = res.data || []
       })

diff --git a/packages/bi-chart/index.ts b/packages/bi-chart/index.ts
@@ -5,3 +5,6 @@ import './style/index.css'
 // export { default as BasicPie } from './components/basic-pie'
 export { default as OutCallTaskBig } from './components/out-call-task-big'
 export { default as BasicBusinessLayout } from './components/basic-business-layout'
+
+// 请求拦截器
+export { initRequestInterceptors } from './_plugins/axios-http'