diff --git a/Services/client/src/router/index.ts b/Services/client/src/router/index.ts
index 06e6fbe..a5fd5d4 100644
--- a/Services/client/src/router/index.ts
+++ b/Services/client/src/router/index.ts
@@ -10,6 +10,26 @@ const router = createRouter({
       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()
+            console.log(roles);
+            
+
+            if (tokenAfterLogin && (roles.includes('user') || roles.includes('admin')) ) {
+              next()
+            } else {
+              console.error('ไม่สามารถดึง Token หลังจากล็อกอินได้')
+              next('/')
+            }
+          })
+        }
+      },
       children: [...UserModule],
       meta: {
         statusAccount: false,
@@ -26,7 +46,11 @@ const router = createRouter({
         } else {
           KeyCloakService.CallLogin(() => {
             const tokenAfterLogin = KeyCloakService.GetAccesToken()
-            if (tokenAfterLogin) {
+            const roles = KeyCloakService.GetUserRoles()
+            console.log(roles);
+            
+
+            if (tokenAfterLogin && roles.includes('admin') ) {
               next()
             } else {
               console.error('ไม่สามารถดึง Token หลังจากล็อกอินได้')
diff --git a/Services/client/src/services/KeyCloakService.ts b/Services/client/src/services/KeyCloakService.ts
index 2cb6f43..c0e2805 100644
--- a/Services/client/src/services/KeyCloakService.ts
+++ b/Services/client/src/services/KeyCloakService.ts
@@ -1,9 +1,9 @@
-import Keycloak from "keycloak-js";
+import Keycloak from 'keycloak-js'
 
-const keycloakInstance = new Keycloak();
+const keycloakInstance = new Keycloak()
 
 interface CallbackOneParam<T1 = void, T2 = void> {
-  (param1: T1): T2;
+  (param1: T1): T2
 }
 /**
  * Initializes Keycloak instance and calls the provided callback function if successfully authenticated.
@@ -12,23 +12,23 @@ interface CallbackOneParam<T1 = void, T2 = void> {
  */
 const Login = (onAuthenticatedCallback: CallbackOneParam): void => {
   keycloakInstance
-    .init({ onLoad: "login-required" })
+    .init({ onLoad: 'login-required' })
     .then(function (authenticated) {
-      authenticated ? onAuthenticatedCallback() : alert("non authenticated");
+      authenticated ? onAuthenticatedCallback() : alert('non authenticated')
     })
     .catch((e) => {
-      console.dir(e);
-      console.log(`keycloak init exception: ${e}`);
-    });
-};
+      console.dir(e)
+      console.log(`keycloak init exception: ${e}`)
+    })
+}
 
 const UserName = (): string | undefined =>
-  keycloakInstance?.tokenParsed?.preferred_username;
+  keycloakInstance?.tokenParsed?.preferred_username
 
-const Token = (): string | undefined => keycloakInstance?.token;
-const IdToken = (): string | undefined => keycloakInstance?.idToken;
+const Token = (): string | undefined => keycloakInstance?.token
+const IdToken = (): string | undefined => keycloakInstance?.idToken
 
-const LogOut = () => keycloakInstance.logout();
+const LogOut = () => keycloakInstance.logout()
 
 /*
 const UserRoles = (): string[] | undefined => {
@@ -38,20 +38,28 @@ const UserRoles = (): string[] | undefined => {
   return keycloakInstance.resourceAccess["express-client"].roles;
 };
 */
-const UserRoles = ():string[] =>{
-  return DecodeToken()?.role
+const UserRoles = () => {
+  const decoded = DecodeToken()
+
+  if (decoded && decoded.resource_access) {
+    return decoded.resource_access[decoded.azp ?? ''].roles
+  }
+  return []
 }
 
-
 const updateToken = (successCallback: any) =>
-  keycloakInstance.updateToken(5).then(successCallback).catch(doLogin);
+  keycloakInstance.updateToken(5).then(successCallback).catch(doLogin)
 
-const doLogin = keycloakInstance.login;
+const doLogin = keycloakInstance.login
 
-const isLoggedIn = () => !!keycloakInstance.token;
+const isLoggedIn = () => !!keycloakInstance.token
 
-const DecodeToken = ()=>{return keycloakInstance.tokenParsed}
-const DecodeIdToken = ()=>{return keycloakInstance.idTokenParsed}
+const DecodeToken = () => {
+  return keycloakInstance.tokenParsed
+}
+const DecodeIdToken = () => {
+  return keycloakInstance.idTokenParsed
+}
 
 const KeycloakService = {
   CallLogin: Login,
@@ -62,10 +70,8 @@ const KeycloakService = {
   GetUserRoles: UserRoles,
   UpdateToken: updateToken,
   IsLoggedIn: isLoggedIn,
-  GetDecodeToken:DecodeToken,
-  GetDecodeIdToken:DecodeIdToken
-};
-
-export default KeycloakService;
-
+  GetDecodeToken: DecodeToken,
+  GetDecodeIdToken: DecodeIdToken,
+}
 
+export default KeycloakService
diff --git a/Services/client/src/views/MainLayout.vue b/Services/client/src/views/MainLayout.vue
index 89f8edc..988fc88 100644
--- a/Services/client/src/views/MainLayout.vue
+++ b/Services/client/src/views/MainLayout.vue
@@ -24,7 +24,7 @@ const { loader } = storeToRefs(loaderStore)
         </div>
 
         <q-space></q-space>
-        <profile v-if="$route.meta.statusAccount" />
+        <profile />
       </q-toolbar>
     </q-header>