feat: consolidate config fetching and handle unauthorized access with updated backend get_config logic

AdminForth/1877/login-page-improvements

Author: yaroslav8765

adminforth/spa/src/App.vue

@@ -197,7 +197,7 @@ import AcceptModal from './components/AcceptModal.vue';
 import Sidebar from './components/Sidebar.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { createHead } from 'unhead'
-import { getCustomComponent } from '@/utils';
+import { getCustomComponent, handleNotAuthorized } from '@/utils';
 import Toast from './components/Toast.vue';
 import {useToastStore} from '@/stores/toast';
 import { initFrontedAPI } from '@/adminforth';
@@ -271,6 +271,7 @@ async function initRouter() {
   routerIsReady.value = true;
 }
 
+// used by Sidebar to reload menu, initial load is done by loadConfig below
 async function loadMenu() {
   await initRouter();
   if (route.meta.sidebarAndHeader !== 'none') {
@@ -280,6 +281,18 @@ async function loadMenu() {
   loginRedirectCheckIsReady.value = true;
 }
 
+async function loadConfig() {
+  const resp = await coreStore.fetchConfig({ redirectToLoginIfNotLoggedIn: false });
+  publicConfigLoaded.value = true;
+
+  await initRouter();
+  if (resp && !resp.loggedIn && route.meta.sidebarAndHeader !== 'none') {
+    // for custom layouts we don't force login, they are allowed to be rendered for anonymous user
+    await handleNotAuthorized();
+  }
+  loginRedirectCheckIsReady.value = true;
+}
+
 function humanizeSnake(str: string): string {
   if (!str) {
     return '';
@@ -341,16 +354,9 @@ watch(dropdownUserButton, async (dropdownUserButton) => {
   }
 })
 
-async function loadPublicConfig() {
-  await coreStore.getPublicConfig();
-  publicConfigLoaded.value = true;
-}
-
-
 // initialize components based on data attribute selectors
 onMounted(async () => {
-  await loadPublicConfig(); // run this in async mode
-  await loadMenu(); // and this
+  await loadConfig();
   // before init flowbite we have to wait router initialized because it affects dom(our v-ifs) and fetch menu
   await initRouter();
   document.documentElement.setAttribute('data-theme', theme.value);

adminforth/spa/src/stores/core.ts

@@ -1,10 +1,10 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { defineStore } from 'pinia'
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, handleNotAuthorized } from '@/utils';
 import websocket from '@/websocket';
 import { useAdminforth } from '@/adminforth';
 
-import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetBaseConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend, AdminForthResourceFrontend } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon, GetConfigResponse, ResourceVeryShort, AdminUser, UserData, AdminForthConfigMenuItem, AdminForthConfigForFrontend, AdminForthResourceFrontend } from '@/types/Common';
 import type { Ref } from 'vue'
 
 
@@ -75,25 +75,42 @@ export const useCoreStore = defineStore('core', () => {
     window.localStorage.setItem('af__theme', theme.value);
   }
 
-  async function fetchMenuAndResource() {
-    const resp: GetBaseConfigResponse = await callAdminForthApi({
-      path: '/get_base_config',
+
+  async function fetchConfig(
+    { redirectToLoginIfNotLoggedIn = true }: { redirectToLoginIfNotLoggedIn?: boolean } = {}
+  ): Promise<GetConfigResponse | null> {
+    const resp: GetConfigResponse | null = await callAdminForthApi({
+      path: '/get_config',
       method: 'GET',
     });
 
     if(!resp){
-      return
+      return null
+    }
+
+    config.value = { ...config.value, ...resp.config } as AdminForthConfigForFrontend;
+
+    if (!resp.loggedIn) {
+      if (redirectToLoginIfNotLoggedIn) {
+        await handleNotAuthorized();
+      }
+      return resp;
     }
+
     menu.value = resp.menu;
     resourceById.value = resp.resources.reduce((acc: Record<string, ResourceVeryShort>, resource: ResourceVeryShort) => {
       acc[resource.resourceId] = resource;
       return acc;
     }, {});
-    config.value = resp.config;
     adminUser.value = resp.adminUser;
     userData.value = resp.user;
     console.log('🌍 AdminForth v', resp.version);
     subscribeToMenuRefresh();
+    return resp;
+  }
+
+  async function fetchMenuAndResource() {
+    await fetchConfig();
   }
 
   async function refreshMenu() {
@@ -234,14 +251,6 @@ export const useCoreStore = defineStore('core', () => {
     isResourceFetching.value = false;
   }
 
-  async function getPublicConfig() {
-    const res = await callAdminForthApi({
-      path: '/get_public_config',
-      method: 'GET',
-    });
-    config.value = {...config.value, ...res};
-  }
-
   async function getLoginFormConfig() {
     const res = await callAdminForthApi({
       path: '/get_login_form_config',
@@ -279,8 +288,8 @@ export const useCoreStore = defineStore('core', () => {
     username,
     userFullname,
     userAvatarUrl,
-    getPublicConfig,
-    fetchMenuAndResource, 
+    fetchConfig,
+    fetchMenuAndResource,
     refreshMenu,
     getLoginFormConfig,
     fetchRecord, 

adminforth/spa/src/utils/utils.ts

@@ -103,6 +103,12 @@ async function tryAutologin(autologin: string): Promise<boolean> {
   return !!coreStore.adminUser;
 }
 
+export async function handleNotAuthorized() {
+  useUserStore().unauthorize();
+  useCoreStore().resetAdminUser();
+  await redirectToLogin();
+}
+
 export async function redirectToLogin() {
   const currentPath = router.currentRoute.value.path;
   const homeRoute = router.getRoutes().find(route => route.name === 'home');
@@ -151,11 +157,9 @@ export async function callApi({path, method, body, headers, silentError = false,
   try {
     const r = await fetch(fullPath, options);
     if (r.status == 401 && !path.includes('/login')) {
-      useUserStore().unauthorize();
-      useCoreStore().resetAdminUser();
-      await redirectToLogin();
+      await handleNotAuthorized();
       return null;
-    } 
+    }
     return await r.json();
   } catch(e) {
     if (e instanceof DOMException && e.name === 'AbortError') {