refactor(api): move admin HTTP wrapper and interceptors to main UI

luizhf42 · otavio · commit 5e5a48da4965 · 2025-10-29T16:45:40.000-03:00
diff --git a/ui/admin/src/api/http.ts b/ui/admin/src/api/http.ts
diff --git a/ui/admin/src/api/interceptors.ts b/ui/admin/src/api/interceptors.ts
diff --git a/ui/admin/src/layouts/AppLayout.vue b/ui/admin/src/layouts/AppLayout.vue
@@ -145,7 +145,7 @@ import useAuthStore from "@admin/store/modules/auth";
 import useSpinnerStore from "@/store/modules/spinner";
 import Snackbar from "@/components/Snackbar/Snackbar.vue";
 import Logo from "../assets/logo-inverted.svg";
-import { createNewClient } from "../api/http";
+import { createNewAdminClient } from "@/api/http";
 import { envVariables } from "../envVariables";
 
 type MenuItem = {
@@ -194,7 +194,7 @@ watch(drawer, () => {
 const logout = async () => {
   authStore.logout();
   await router.push("/login");
-  createNewClient();
+  createNewAdminClient();
   layoutStore.layout = "SimpleLayout";
 };
 
diff --git a/ui/admin/src/store/api/announcement.ts b/ui/admin/src/store/api/announcement.ts
@@ -1,5 +1,5 @@
-import { adminApi } from "@admin/api/http";
 import { IAdminAnnouncementRequestBody } from "@admin/interfaces/IAnnouncement";
+import { adminApi } from "@/api/http";
 
 export const createAnnouncement = async (
   announcement: IAdminAnnouncementRequestBody,
diff --git a/ui/admin/src/store/api/auth.ts b/ui/admin/src/store/api/auth.ts
@@ -1,4 +1,4 @@
-import { adminApi } from "./../../api/http";
+import { adminApi } from "@/api/http";
 
 type UserLogin = {
   username: string;
diff --git a/ui/admin/src/store/api/devices.ts b/ui/admin/src/store/api/devices.ts
@@ -1,4 +1,4 @@
-import { adminApi } from "../../api/http";
+import { adminApi } from "@/api/http";
 
 export const getDevices = (
   page: number,
diff --git a/ui/admin/src/store/api/firewall_rules.ts b/ui/admin/src/store/api/firewall_rules.ts
@@ -1,4 +1,4 @@
-import { adminApi } from "@admin/api/http";
+import { adminApi } from "@/api/http";
 
 export const fetchFirewalls = async (page: number, perPage: number) => adminApi.getFirewallRulesAdmin(page, perPage);
 
diff --git a/ui/admin/src/store/api/instance.ts b/ui/admin/src/store/api/instance.ts
@@ -1,5 +1,5 @@
-import { adminApi } from "@admin/api/http";
 import { IAdminUpdateSAML } from "@admin/interfaces/IInstance";
+import { adminApi } from "@/api/http";
 
 const getAuthenticationSettings = async () => adminApi.getAuthenticationSettings();
 
diff --git a/ui/admin/src/store/api/license.ts b/ui/admin/src/store/api/license.ts
@@ -1,10 +1,8 @@
 import axios from "axios";
-import { adminApi } from "../../api/http";
+import { adminApi } from "@/api/http";
 
-// Busca a licença atual
 const getLicense = async () => adminApi.getLicense();
 
-// Faz o upload de uma nova licença
 const uploadLicense = async (file: File) => {
   const formData = new FormData();
   formData.append("file", file);
diff --git a/ui/admin/src/store/api/namespaces.ts b/ui/admin/src/store/api/namespaces.ts
@@ -1,5 +1,5 @@
 import { IAdminNamespace } from "@admin/interfaces/INamespace";
-import { adminApi } from "./../../api/http";
+import { adminApi } from "@/api/http";
 
 export const fetchNamespaces = async (
   page: number,
diff --git a/ui/admin/src/store/api/sessions.ts b/ui/admin/src/store/api/sessions.ts
@@ -1,4 +1,4 @@
-import { adminApi } from "../../api/http";
+import { adminApi } from "@/api/http";
 
 const fetchSessions = async (perPage: number, page: number) => adminApi.getSessionsAdmin(page, perPage);
 
diff --git a/ui/admin/src/store/api/stats.ts b/ui/admin/src/store/api/stats.ts
@@ -1,4 +1,4 @@
-import { adminApi } from "@admin/api/http";
+import { adminApi } from "@/api/http";
 
 const getAdminStats = async () => adminApi.getStats();
 
diff --git a/ui/admin/src/store/api/users.ts b/ui/admin/src/store/api/users.ts
@@ -1,6 +1,6 @@
 import { IAdminUserFormData } from "@admin/interfaces/IUser";
 import { UserAdminRequest } from "@admin/api/client";
-import { adminApi } from "@admin/api/http";
+import { adminApi } from "@/api/http";
 
 export const fetchUsers = async (
   page: number,
@@ -31,4 +31,4 @@ export const updateUser = async (id: string, userData: IAdminUserFormData) => ad
 
 export const resetUserPassword = async (id: string) => adminApi.adminResetUserPassword(id);
 
-export const deleteUser = (id: string) => adminApi.deleteUser(id);
+export const deleteUser = (id: string) => adminApi.adminDeleteUser(id);
diff --git a/ui/admin/src/views/Login.vue b/ui/admin/src/views/Login.vue
@@ -64,7 +64,7 @@ import { useRoute, useRouter } from "vue-router";
 import useAuthStore from "@admin/store/modules/auth";
 import useSnackbar from "@/helpers/snackbar";
 import Logo from "../assets/logo-inverted.svg";
-import { createNewClient } from "../api/http";
+import { createNewAdminClient } from "@/api/http";
 
 const showPassword = ref(false);
 const snackbar = useSnackbar();
@@ -99,7 +99,7 @@ const login = async () => {
         username: username.value,
         password: password.value,
       });
-      createNewClient();
+      createNewAdminClient();
       if (route.query.redirect) {
         router.push(`${route.query.redirect}`);
       } else {
diff --git a/ui/admin/tests/unit/components/Instance/SSO/index.spec.ts b/ui/admin/tests/unit/components/Instance/SSO/index.spec.ts
@@ -4,9 +4,9 @@ import { describe, it, expect, vi } from "vitest";
 import { DOMWrapper, flushPromises, mount } from "@vue/test-utils";
 import { createVuetify } from "vuetify";
 import { createPinia, setActivePinia } from "pinia";
-import { adminApi } from "@admin/api/http";
 import useInstanceStore from "@admin/store/modules/instance";
 import ConfigureSSO from "@admin/components/Instance/SSO/ConfigureSSO.vue";
+import { adminApi } from "@/api/http";
 import { SnackbarPlugin } from "@/plugins/snackbar";
 
 describe("Configure SSO", async () => {
diff --git a/ui/admin/tests/unit/components/License/License/index.spec.ts b/ui/admin/tests/unit/components/License/License/index.spec.ts
@@ -4,9 +4,9 @@ import { describe, expect, it } from "vitest";
 import { createPinia, setActivePinia } from "pinia";
 import MockAdapter from "axios-mock-adapter";
 import useLicenseStore from "@admin/store/modules/license";
-import { adminApi } from "@admin/api/http";
 import License from "@admin/components/Settings/SettingsLicense.vue";
 import routes from "@admin/router";
+import { adminApi } from "@/api/http";
 import { SnackbarPlugin } from "@/plugins/snackbar";
 
 const licenseMock = {
diff --git a/ui/admin/tests/unit/components/Settings/SettingsAuthentication/index.spec.ts b/ui/admin/tests/unit/components/Settings/SettingsAuthentication/index.spec.ts
@@ -5,8 +5,8 @@ import { createPinia, setActivePinia } from "pinia";
 import MockAdapter from "axios-mock-adapter";
 import useInstanceStore from "@admin/store/modules/instance";
 import SettingsAuthentication from "@admin/components/Settings/SettingsAuthentication.vue";
-import { adminApi } from "@admin/api/http";
 import routes from "@admin/router";
+import { adminApi } from "@/api/http";
 import { SnackbarPlugin } from "@/plugins/snackbar";
 
 window.matchMedia = vi.fn().mockImplementation((query) => ({
diff --git a/ui/admin/tests/unit/views/Announcements/Announcements.spec.ts b/ui/admin/tests/unit/views/Announcements/Announcements.spec.ts
@@ -4,10 +4,10 @@ import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { createPinia, setActivePinia } from "pinia";
 import useAnnouncementStore from "@admin/store/modules/announcement";
-import { adminApi } from "@admin/api/http";
 import routes from "@admin/router";
 import Announcements from "@admin/views/Announcements.vue";
 import { SnackbarPlugin } from "@/plugins/snackbar";
+import { adminApi } from "@/api/http";
 
 type AnnouncementsWrapper = VueWrapper<InstanceType<typeof Announcements>>;
 
diff --git a/ui/src/api/http.ts b/ui/src/api/http.ts
@@ -4,21 +4,36 @@ import { Configuration } from "./client";
 import { BaseAPI } from "./client/base";
 import { setupInterceptorsTo } from "./interceptors";
 
-// This is the default configuration for local instance endpoints
+// Default configuration for main UI's endpoints
 const configuration = new Configuration();
 configuration.basePath = `${window.location.protocol}//${window.location.host}`;
 configuration.accessToken = localStorage.getItem("token") || "";
 
-// We need a custom configuration for cloud endpoints
+// Admin configuration
+const adminConfiguration = new Configuration();
+adminConfiguration.basePath = `${window.location.protocol}//${window.location.host}`;
+adminConfiguration.accessToken = localStorage.getItem("cloud_token") || "";
+
+// Custom configuration for cloud endpoints
 const cloudApiConfiguration = new Configuration();
 cloudApiConfiguration.basePath = "https://cloud.shellhub.io";
 
-// Creates a new axios instance and setup interceptors by default
-const newAxiosInstance = (setupInterceptor = true): AxiosInstance => {
+// Creates a new axios instance and sets up interceptors
+const newAxiosInstance = (setupInterceptor = true, isAdmin = false): AxiosInstance => {
   const instance = axios.create();
-  if (setupInterceptor) setupInterceptorsTo(instance);
+  if (setupInterceptor) setupInterceptorsTo(instance, isAdmin);
   return instance;
 };
+
+// Admin API instance
+// eslint-disable-next-line import/no-mutable-exports
+let adminApi = new axiosTs.AdminApi(
+  adminConfiguration,
+  undefined,
+  newAxiosInstance(true, true),
+);
+
+// Main UI API instances
 const sessionsApi = new axiosTs.SessionsApi(
   configuration,
   undefined,
@@ -91,7 +106,7 @@ const announcementApi = new axiosTs.AnnouncementsApi(
 );
 
 /**
- * Extends the interface BaseAPI to include a new method `getAxios` allowing
+ * Extends the interface BaseAPI to include a new method `getAxios`, allowing
  * access to the protected axios property without the need to access it
  * directly from outside the class and avoiding a linting error caused by
  * accessing a protected property.
@@ -104,22 +119,22 @@ declare module "./client/base" {
   }
 }
 
-/** Returns the axios instance */
+// Returns the axios instance
 BaseAPI.prototype.getAxios = function getAxios(this: BaseAPI): AxiosInstance {
   return this.axios;
 };
 
-/** Returns the configuration */
+// Returns the configuration
 BaseAPI.prototype.getConfiguration = function getConfiguration(this: BaseAPI): Configuration | undefined {
   return this.configuration;
 };
 
-/** Sets the configuration */
+// Sets the configuration
 BaseAPI.prototype.setConfiguration = function setConfiguration(this: BaseAPI, configuration: Configuration): void {
   this.configuration = configuration;
 };
 
-// Reloads the configuration for all APIs
+// Reloads the configuration for main UI APIs
 const reloadConfiguration = () => {
   [
     sessionsApi,
@@ -140,9 +155,21 @@ const reloadConfiguration = () => {
   });
 };
 
+// Recreates the admin API client with fresh configuration (for admin auth persistence)
+const createNewAdminClient = () => {
+  const newConfiguration = new Configuration();
+  newConfiguration.basePath = `${window.location.protocol}//${window.location.host}`;
+  newConfiguration.accessToken = localStorage.getItem("cloud_token") || "";
+  adminApi = new axiosTs.AdminApi(newConfiguration, undefined, newAxiosInstance(true, true));
+  return { adminApi };
+};
+
 export {
   configuration,
+  adminConfiguration,
   reloadConfiguration,
+  createNewAdminClient,
+  adminApi,
   sessionsApi,
   devicesApi,
   containersApi,
diff --git a/ui/src/api/interceptors.ts b/ui/src/api/interceptors.ts
@@ -1,5 +1,5 @@
 import { AxiosError, AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from "axios";
-import { router } from "../router";
+import useAdminAuthStore from "@admin/store/modules/auth";
 import useAuthStore from "@/store/modules/auth";
 import useSpinnerStore from "@/store/modules/spinner";
 
@@ -18,19 +18,27 @@ const onResponse = (response: AxiosResponse): AxiosResponse => {
   return response;
 };
 
-const onResponseError = async (error: AxiosError): Promise<AxiosError> => {
-  const { logout } = useAuthStore();
+const onResponseError = async (error: AxiosError, isAdmin: boolean): Promise<AxiosError> => {
   useSpinnerStore().status = false;
-  if (error.response?.status === 401) {
-    logout();
+  if (isAdmin) {
+    const router = (await import("@admin/router")).default;
+    if (error.response?.status === 401) {
+      useAdminAuthStore().logout();
+      await router.push({ name: "login" });
+    } else if (error.response?.status === 402) {
+      await router.push({ name: "license" });
+    }
+  } else if (error.response?.status === 401) {
+    const { router } = await import("@/router");
+    useAuthStore().logout();
     await router.push({ name: "Login", query: router.currentRoute.value.query });
   }
   return Promise.reject(error);
 };
 
 // eslint-disable-next-line import/prefer-default-export
-export function setupInterceptorsTo(axiosInstance: AxiosInstance): AxiosInstance {
+export function setupInterceptorsTo(axiosInstance: AxiosInstance, isAdmin = false): AxiosInstance {
   axiosInstance.interceptors.request.use(onRequest, onRequestError);
-  axiosInstance.interceptors.response.use(onResponse, onResponseError);
+  axiosInstance.interceptors.response.use(onResponse, (error) => onResponseError(error, isAdmin));
   return axiosInstance;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { adminApi } from "./../../api/http";`
	`1`	`+import { adminApi } from "@/api/http";`
`2`	`2`
`3`	`3`	`type UserLogin = {`
`4`	`4`	`username: string;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { adminApi } from "../../api/http";`
	`1`	`+import { adminApi } from "@/api/http";`
`2`	`2`
`3`	`3`	`export const getDevices = (`
`4`	`4`	`page: number,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { adminApi } from "@admin/api/http";`
	`1`	`+import { adminApi } from "@/api/http";`
`2`	`2`
`3`	`3`	`export const fetchFirewalls = async (page: number, perPage: number) => adminApi.getFirewallRulesAdmin(page, perPage);`
`4`	`4`