Interceptor plugins

package.json

@@ -58,6 +58,7 @@
     "unplugin-vue-router": "^0.19.0",
     "vite": "^7.3.2",
     "vite-plugin-vuetify": "^2.1.2",
+    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.15",
     "vue-router": "^4.6.3",
     "vue-tsc": "^3.2.6"

src/api/clients/api.client.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_SPOTIFY_ENDPOINT,
+  timeout: 10_000,
+  headers: {
+    "Content-Type": "application/x-www-form-urlencoded"
+  }
+});

src/api/clients.ts → src/api/clients/auth.client.ts

@@ -7,11 +7,3 @@ export const authApiClient = axios.create({
     "Content-Type": "application/x-www-form-urlencoded"
   }
 });
-
-export const apiClient = axios.create({
-  baseURL: import.meta.env.VITE_SPOTIFY_ENDPOINT,
-  timeout: 10_000,
-  headers: {
-    "Content-Type": "application/x-www-form-urlencoded"
-  }
-});

src/api/clients/index.ts

@@ -0,0 +1,2 @@
+export { apiClient } from "./api.client";
+export { authApiClient } from "./auth.client";

src/api/index.ts

@@ -1,2 +1,2 @@
-import "./interceptors";
-import "./clients";
+export { setupInterceptors } from "./setup.interceptors";
+export * from "./clients";

src/api/interceptors/auth.interceptor.ts

@@ -0,0 +1,16 @@
+import type { InternalAxiosRequestConfig } from "axios";
+
+type AuthStoreLike = {
+  accessToken: string | undefined;
+};
+
+export const createAuthRequestInterceptor =
+  (authStore: AuthStoreLike) =>
+  (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
+    if (authStore.accessToken) {
+      config.headers = config.headers ?? {};
+      config.headers.Authorization = `Bearer ${authStore.accessToken}`;
+    }
+
+    return config;
+  };

src/api/interceptors/index.ts

@@ -1,3 +1,3 @@
-import "./refresh-token"
-import "./rate-limit"
-import "./auth"
+export * from "./auth.interceptor";
+export * from "./refresh-token.interceptor";
+export * from "./rate-limit.interceptor";

src/api/interceptors/rate-limit.interceptor.ts

@@ -0,0 +1,38 @@
+import type { AxiosError, AxiosInstance, InternalAxiosRequestConfig } from "axios";
+
+export const createRateLimitInterceptor =
+  (client: AxiosInstance) =>
+    async (error: AxiosError) => {
+      const config = error.config as InternalAxiosRequestConfig | undefined;
+
+      if (!config || !error.response) {
+        return Promise.reject(error);
+      }
+
+      if (error.response.status !== 429) {
+        return Promise.reject(error);
+      }
+
+      const method = config.method?.toLowerCase();
+
+      const safeMethods = ["get", "head", "put", "delete"];
+
+      if (!method || !safeMethods.includes(method)) {
+        return Promise.reject(error);
+      }
+
+      const retryAfterSecs = parseInt(
+        error.response.headers["retry-after"],
+        10
+      );
+
+      const delayMs =
+        (Number.isFinite(retryAfterSecs) ? retryAfterSecs : 1) * 1000;
+
+      const wait = (ms: number) =>
+        new Promise((res) => setTimeout(res, ms));
+
+      await wait(Math.min(delayMs, 120_000));
+
+      return client.request(config);
+    };