update auth

src/views/MainLayout.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from "vue";
-import keycloak, { kcLogout } from "@/plugins/keycloak";
+import { ref, onMounted, onUnmounted, watch, onBeforeMount } from "vue";
 import { useRoute } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { logout, tokenParsed } from "@/plugins/auth";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -34,6 +34,7 @@ const {
   date2Thai,
   dialogConfirm,
 } = mixin;
+
 // const DataStore = useroleUserDataStore();
 // const { fetchroleUser } = DataStore;
 
@@ -49,6 +50,7 @@ const active = ref<number>(0);
 const drawerL = ref<boolean>(false);
 const fullname = ref<string>("");
 const role = ref<string[]>([]);
+const reles = ref<any[]>([]);
 const notiTrigger = ref<boolean>(false);
 
 const notiList = ref<notiType[]>([]);
@@ -123,6 +125,16 @@ const getDataNotification = async (index: number, type: string) => {
     .finally(() => {});
 };
 
+onBeforeMount(async () => {
+  reles.value = await tokenParsed();
+  //  ดิงชื่อผู้ใช้งานจาก keycloak
+  const tokenParsedData: any = await tokenParsed();
+  if (tokenParsedData != null) {
+    fullname.value = tokenParsedData.name;
+    role.value = tokenParsedData.role;
+  }
+});
+
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
@@ -259,7 +271,7 @@ const doLogout = () => {
   dialogConfirm(
     $q,
     async () => {
-      kcLogout();
+      logout();
     },
     // keycloak.logout({
     //   redirectUri: `${window.location.protocol}//${window.location.host}/`,
@@ -274,14 +286,6 @@ function deleteCookie(name: string) {
   document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
 }
 
-/**
- * ดิงชื่อผู้ใช้งานจาก keycloak
- */
-if (keycloak.tokenParsed != null) {
-  fullname.value = keycloak.tokenParsed.name;
-  role.value = keycloak.tokenParsed.role;
-}
-
 const clickDelete = async (id: string, index: number) => {
   dialogRemove($q, async () => {
     showLoader();
@@ -400,6 +404,7 @@ watch(
           <q-icon name="mdi-book-open-variant" size="18px" color="grey-7" />
           <q-tooltip>คู่มือ</q-tooltip>
         </q-btn>
+
         <!-- Notification -->
         <q-btn
           round
@@ -794,11 +799,12 @@ watch(
             </div>
           </q-toolbar-title>
         </q-toolbar>
+
         <q-separator inset color="grey-9" />
         <q-list padding>
           <div v-for="(menuItem, index) in menuList" :key="index">
             <!-- เมนูย่อย -->
-            <div v-if="checkPermission(menuItem.role)">
+            <div v-if="checkPermission(menuItem.role, reles)">
               <q-expansion-item
                 group="somegroup"
                 class="menuSub"