fix: login url fragment and refresh token

Services/client/src/router/index.ts

@@ -1,73 +1,52 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import UserModule from '@/modules/01_user/router'
 import AdminModule from '@/modules/02_admin/router'
-import KeyCloakService from '@/services/KeyCloakService'
+import { getRole, getToken, login } from '@/services/KeyCloakService'
 
+const history = createWebHistory(import.meta.env.BASE_URL)
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history,
   routes: [
     {
       path: '/',
       name: 'UserModule',
       component: () => import('@/views/MainLayout.vue'),
-      beforeEnter: (_to, _from, next) => {
-        const token = KeyCloakService.GetAccesToken()
-        if (token) {
-          next()
-        } else {
-          KeyCloakService.CallLogin(() => {
-            const tokenAfterLogin = KeyCloakService.GetAccesToken()
-            const roles = KeyCloakService.GetUserRoles()
+      beforeEnter: async (_to, _from, next) => {
+        const token = await getToken()
 
-            if (
-              tokenAfterLogin &&
-              (roles.includes('user') || roles.includes('admin'))
-            ) {
-              next()
-            } else {
-              console.error('ไม่สามารถดึง Token หลังจากล็อกอินได้')
-              next('/')
-            }
-          })
-        }
+        if (token) return next()
+
+        await login(async () => {
+          if (await getToken()) return next()
+          return next('/')
+        })
       },
       children: [...UserModule],
-      meta: {
-        statusAccount: false,
-      },
+      meta: { statusAccount: false },
     },
     {
       path: '/admin',
       name: 'AdminModule',
       component: () => import('@/views/MainLayout.vue'),
-      beforeEnter: (_to, _from, next) => {
-        const token = KeyCloakService.GetAccesToken()
-        if (token) {
-          next()
-        } else {
-          KeyCloakService.CallLogin(() => {
-            const tokenAfterLogin = KeyCloakService.GetAccesToken()
-            const roles = KeyCloakService.GetUserRoles()
-            console.log(roles)
+      beforeEnter: async (_to, _from, next) => {
+        const token = await getToken()
 
-            if (tokenAfterLogin && roles.includes('admin')) {
-              next()
-            } else {
-              console.error('ไม่สามารถดึง Token หลังจากล็อกอินได้')
-              next('/')
-            }
-          })
-        }
-      },
-      meta: {
-        statusAccount: true,
+        if (token) return next()
+
+        await login(async () => {
+          const token = await getToken()
+          const roles = getRole()
+
+          if (token && roles.includes('admin')) {
+            return next()
+          }
+
+          return next('/')
+        })
       },
+      meta: { statusAccount: true },
       children: [...AdminModule],
     },
-    /**
-     * 404 Not Found
-     * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
-     */
     {
       path: '/:pathMatch(.*)*',
       name: 'NotFound',