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"

src/views/auth.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { kcAuthen } from "@/plugins/keycloak";
+
+import { setAuthen } from "@/plugins/auth";
 
 const route = useRoute();
 
@@ -17,9 +18,12 @@ function setCookie(name: string, value: any, days: number) {
 
 onMounted(async () => {
   if (route.query.token && route.query.accessToken) {
-    // console.log('query', route.query.token)
-    // console.log('accessToken', route.query.accessToken)
-    kcAuthen(route.query.token.toString(), route.query.accessToken.toString());
+    const params: any = await {
+      access_token: route.query.token,
+      expires_in: route.query.expires ? route.query.expires : 36000,
+      refresh_token: route.query.accessToken,
+    };
+    setAuthen(params);
   }
 });
 </script>

src/views/login.vue

@@ -2,11 +2,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import axios from "axios";
-import keycloak, { keycloakConfig, kcAuthen } from "@/plugins/keycloak";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import CustomComponent from "@/components/CustomDialog.vue";
+import { setAuthen, authenticated, tokenParsed } from "@/plugins/auth";
 
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -24,28 +24,18 @@ const password = ref<string>("");
 async function onSubmit() {
   showLoader();
   const formdata = new URLSearchParams();
-  formdata.append("client_id", keycloakConfig.clientId);
-  formdata.append("client_secret", keycloakConfig.clientSecret);
-  formdata.append("grant_type", "password");
-  formdata.append(
-    "requested_token_type",
-    "urn:ietf:params:oauth:token-type:refresh_token"
-  );
+
   formdata.append("username", username.value);
   formdata.append("password", password.value);
 
   await axios
-    .post(
-      `${keycloakConfig.url}/realms/${keycloakConfig.realm}/protocol/openid-connect/token`,
-      formdata,
-      {
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-      }
-    )
+    .post(`${import.meta.env.VITE_API_URI_CONFIG}/org/login`, formdata, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    })
     .then((res) => {
-      kcAuthen(res.data.access_token, res.data.refresh_token);
+      setAuthen(res.data.result);
     })
     .catch((err) => {
       messageError($q, err, "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
@@ -55,17 +45,19 @@ async function onSubmit() {
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
   // check authen keycloak and role of system
-  if (keycloak.authenticated) {
+  const checkAuthen = await authenticated();
+  const checkToken: any = await tokenParsed();
+  if (checkAuthen) {
     isDisplay.value = false;
     showLoader();
-    if (keycloak.tokenParsed) {
+    if (checkToken) {
       const checkRole = (element: string) =>
         element === "ADMIN" || element === "SUPER_ADMIN";
 
       // ถ้าไม่มีสิทธิ์เข้าใช้งานระบบ แสดงข้อความแจ้งเตือน
-      if (keycloak.tokenParsed.role.findIndex(checkRole) === -1) {
+      if (checkToken.role.findIndex(checkRole) === -1) {
         $q.dialog({
           component: CustomComponent,
           componentProps: {