refactor: simplify route authorization logic and improve key usage in LoginView

Author: NoOne7135

adminforth/spa/src/router/index.ts

@@ -15,19 +15,11 @@ const router = createRouter({
         title: 'Login', 
         customLayout: true 
       },
-      // beforeEnter: async (to, from, next) => {
-      //   if(localStorage.getItem('isAuthorized') === 'true') {
-      //     // check if url has next=... and redirect to it
-      //     console.log('to.query', to.query)
-      //     if (to.query.next) {
-      //       next(to.query.next.toString())
-      //     } else {
-      //       next({name: 'home'});
-      //     }
-      //   } else {
-      //     next()
-      //   }
-      // }
+      beforeEnter: (to) => {
+        if (localStorage.getItem('isAuthorized') === 'true') {
+          return to.query.next ? to.query.next.toString() : { name: 'home' };
+        }
+      }
     },
     {
       path: '/resource/:resourceId',

adminforth/spa/src/views/LoginView.vue

@@ -87,7 +87,8 @@
                         </div>
 
                         <component 
-                          v-for="c in coreStore?.config?.loginPageInjections?.underInputs || []"
+                          v-for="(c, index) in coreStore?.config?.loginPageInjections?.underInputs || []"
+                          :key="`under-inputs-${index}`"
                           :is="getCustomComponent(formatComponent(c))"
                           :meta="formatComponent(c).meta"
                           @update:disableLoginButton="setDisableLoginButton($event)"
@@ -106,7 +107,8 @@
                           {{ $t('Login to your account') }}
                         </Button>
                         <component 
-                          v-for="c in coreStore?.config?.loginPageInjections?.underLoginButton || []"
+                          v-for="(c, index) in coreStore?.config?.loginPageInjections?.underLoginButton || []"
+                          :key="`under-login-button-${index}`"
                           :is="getCustomComponent(formatComponent(c))"
                           :meta="formatComponent(c).meta"
                           @update:disableLoginButton="setDisableLoginButton($event)"
@@ -125,25 +127,21 @@
 <script setup lang="ts">
 
 import { getCustomComponent, formatComponent } from '@/utils';
-import { onBeforeMount, onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import { callAdminForthApi, loadFile } from '@/utils';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { Button, Checkbox, Input } from '@/afcl';
-import { useI18n } from 'vue-i18n';
 import ErrorMessage from '@/components/ErrorMessage.vue';
 
-const { t } = useI18n();
-
 const passwordInput = ref<InstanceType<typeof Input> | null>(null);
 const usernameInput = ref<InstanceType<typeof Input> | null>(null);
 const rememberMeValue= ref(false);
 const username = ref('');
 const password = ref('');
 
-const route = useRoute();
 const router = useRouter();
 const inProgress = ref<boolean>(false);
 const isSuccess = ref<boolean>(false);
@@ -160,18 +158,6 @@ const backgroundPosition = computed(() => {
 });
 
 
-onBeforeMount(() => {
-  if (localStorage.getItem('isAuthorized') === 'true') {
-    // if route has next param, redirect
-    coreStore.fetchMenuAndResource();
-    if (route.query.next) {
-      router.push(route.query.next.toString());
-    } else {
-      router.push({ name: 'home' });
-    }
-  }
-})
-
 onMounted(async () => {
   coreStore.getLoginFormConfig();
     if (coreStore.config?.demoCredentials) {