refactor(ui): centralize layout handling and simplify auth check

Refactored App.vue and layouts to use <script setup> syntax.
Introduced layout meta field in routes for centralized layout control.
Simplified router guard to handle auth and layout setup consistently.

Author: luannmoreira

ui/admin/src/App.vue

@@ -1,58 +1,23 @@
 <template>
   <v-app>
-    <component :is="layout" :data-test="`${layout}-component`" />
+    <component
+      :is="layout"
+      :data-test="`${layout}-component`" />
   </v-app>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, computed } from "vue";
-import { useRouter } from "vue-router";
+<script setup lang="ts">
+import { computed } from "vue";
 import SimpleLayout from "./layouts/SimpleLayout.vue";
 import AppLayout from "./layouts/AppLayout.vue";
 import { useStore } from "./store";
-import { INotificationsError } from "./interfaces/INotifications";
 
-export default defineComponent({
-  name: "App",
-  components: {
-    appLayout: AppLayout,
-    simpleLayout: SimpleLayout,
-  },
-  setup() {
-    const store = useStore();
-    const router = useRouter();
+const components = {
+  SimpleLayout,
+  AppLayout,
+};
 
-    const layout = computed(() => store.getters["layout/getLayout"]);
+const store = useStore();
 
-    const isLoggedIn = computed(() => store.getters["auth/isLoggedIn"]);
-
-    const currentRoute = computed(() => router.currentRoute.value.path);
-
-    onMounted(async () => {
-      if (!isLoggedIn.value) {
-        try {
-          await store.dispatch("auth/logout");
-          store.dispatch("layout/setLayout", "simpleLayout");
-          router.push("/login");
-        } catch {
-          store.dispatch("snackbar/showSnackbarErrorAction", INotificationsError.namespaceLoad);
-        }
-      }
-
-      if (isLoggedIn.value && currentRoute.value !== "/login") {
-        const license = await store.dispatch("license/get");
-        if (!license || license.expired) {
-          store.dispatch("snackbar/showSnackbarErrorAction", INotificationsError.license);
-          store.dispatch("layout/setLayout", "appLayout");
-          router.push("/license");
-        }
-        store.dispatch("layout/setLayout", "appLayout");
-      }
-    });
-
-    return {
-      layout,
-    };
-  },
-});
+const layout = computed(() => components[store.getters["layout/getLayout"]]);
 </script>

ui/admin/src/layouts/AppLayout.vue

@@ -188,8 +188,9 @@ const logout = async () => {
   await store.dispatch("auth/logout");
   await router.push("/login");
   createNewClient();
-  store.dispatch("layout/setLayout", "simpleLayout");
+  store.dispatch("layout/setLayout", "SimpleLayout");
 };
+
 const triggerClick = (item: MenuItem): void => {
   switch (item.type) {
     case "path":
@@ -293,10 +294,14 @@ const getFilteredChildren = (children: DrawerItem[]) => expiredLicense.value
 
 const visibleItems = computed(() => {
   if (expiredLicense.value) {
-    return items.filter(
-      (item) => item.title === "Settings" && item.children?.some((child) => child.title === "License"),
-    );
+    return items
+      .filter((item) => item.title === "Settings")
+      .map((item) => ({
+        ...item,
+        children: item.children?.filter((child) => child.title === "License"),
+      }));
   }
+
   return items.filter((item) => !item.hidden);
 });
 

ui/admin/src/layouts/SimpleLayout.vue

@@ -2,20 +2,11 @@
   <router-view :key="currentRoute.value.path" />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { computed } from "vue";
 import { useRouter } from "vue-router";
 
-export default {
-  name: "SimpleLayout",
-  setup() {
-    const router = useRouter();
+const router = useRouter();
 
-    const currentRoute = computed(() => router.currentRoute);
-
-    return {
-      currentRoute,
-    };
-  },
-};
+const currentRoute = computed(() => router.currentRoute);
 </script>

ui/admin/src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory, NavigationGuardNext, RouteLocationNormalized } from "vue-router";
 import Login from "@admin/views/Login.vue";
 import Dashboard from "@admin/views/Dashboard.vue";
 import Users from "@admin/views/Users.vue";
@@ -7,13 +7,19 @@ import SettingsAuthentication from "@admin/components/Settings/SettingsAuthentic
 import Namespaces from "@admin/views/Namespaces.vue";
 import Settings from "@admin/views/Settings.vue";
 
+import { INotificationsError } from "@admin/interfaces/INotifications";
+import { computed } from "vue";
 import { store } from "../store";
 
 const routes = [
   {
     path: "/login",
     name: "login",
     component: Login,
+    meta: {
+      layout: "SimpleLayout",
+      requiresAuth: false,
+    },
   },
   {
     path: "/",
@@ -120,21 +126,41 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, from, next) => {
-  if (to.path !== "/login") {
-    if (store.getters["auth/isLoggedIn"]) {
-      return next();
+router.beforeEach(
+  async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
+    const isLoggedIn: boolean = store.getters["auth/isLoggedIn"];
+    const requiresAuth = to.meta.requiresAuth ?? true;
+
+    const layout = to.meta.layout || "AppLayout";
+    await store.dispatch("layout/setLayout", layout);
+
+    if (!isLoggedIn && requiresAuth) {
+      return next({
+        name: "login",
+        query: { redirect: to.fullPath },
+      });
     }
-    return next(`/login?redirect=${to.path}`);
-  }
-  if (store.getters["auth/isLoggedIn"]) {
-    if (to.path === "/login" && to.query.token) {
-      return next();
+
+    if (isLoggedIn && !to.meta.requiresAuth) {
+      const license = computed(() => store.getters["license/license"]);
+
+      try {
+        await store.dispatch("license/get");
+
+        if (license.value.expired && to.name !== "SettingLicense") {
+          store.dispatch("snackbar/showSnackbarErrorAction", INotificationsError.license);
+          return next({ name: "SettingLicense" });
+        }
+      } catch {
+        if (to.name !== "SettingLicense") {
+          store.dispatch("snackbar/showSnackbarErrorAction", INotificationsError.license);
+          return next({ name: "SettingLicense" });
+        }
+      }
     }
-    return next("/");
-  }
 
-  return next();
-});
+    return next();
+  },
+);
 
 export default router;

ui/admin/src/store/modules/auth.ts

@@ -20,7 +20,7 @@ export const auth: Module<AuthState, State> = {
     tenant: localStorage.getItem("tenant") || "",
   },
   getters: {
-    isLoggedIn: (state) => state.token,
+    isLoggedIn: (state) => !!state.token,
     currentUser: (state) => state.user,
     authStatus: (state) => state.status,
     tenant: (state) => state.tenant,

ui/admin/src/store/modules/license.ts

@@ -9,6 +9,9 @@ export interface LicenseState {
 
 export const license: Module<LicenseState, State> = {
   namespaced: true,
+  state: {
+    license: {} as ILicense,
+  },
 
   getters: {
     isExpired: (state) => (state.license && state.license.expired)

ui/admin/tests/unit/store/modules/Auth.spec.ts

@@ -38,13 +38,13 @@ describe("Auth", () => {
 
     store.commit("auth/authSuccess", { token, user, tenant });
     expect(store.getters["auth/authStatus"]).toEqual(statusSuccess);
-    expect(store.getters["auth/isLoggedIn"]).toEqual(token);
+    expect(store.getters["auth/isLoggedIn"]).toEqual(true);
     expect(store.getters["auth/currentUser"]).toEqual(user);
     expect(store.getters["auth/tenant"]).toEqual(tenant);
 
     store.commit("auth/logout");
     expect(store.getters["auth/authStatus"]).toEqual("");
-    expect(store.getters["auth/isLoggedIn"]).toEqual("");
+    expect(store.getters["auth/isLoggedIn"]).toEqual(false);
     expect(store.getters["auth/currentUser"]).toEqual("");
     expect(store.getters["auth/tenant"]).toEqual("");
   });