update auth

src/main.ts

@@ -3,7 +3,6 @@ import App from "./App.vue";
 import router from "./router";
 import { Dialog, Notify, Quasar, Loading } from "quasar";
 import "./quasar-user-options";
-import keycloak, { getToken } from "@/plugins/keycloak";
 
 import qDraggableTable from "quasar-ui-q-draggable-table";
 import "quasar-ui-q-draggable-table/dist/index.css";
@@ -89,36 +88,25 @@ app.component(
 app.config.globalProperties.$http = http;
 
 // authen with keycloak client
-function getCookie(name: string) {
+// function getCookie(name: string) {
-  const nameEQ = name + "=";
+//   const nameEQ = name + "=";
-  const ca = document.cookie.split(";");
+//   const ca = document.cookie.split(";");
-  for (let i = 0; i < ca.length; i++) {
+//   for (let i = 0; i < ca.length; i++) {
-    let c = ca[i];
+//     let c = ca[i];
-    while (c.charAt(0) == " ") c = c.substring(1, c.length);
+//     while (c.charAt(0) == " ") c = c.substring(1, c.length);
-    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+//     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
-  }
+//   }
-  return null;
+//   return null;
-}
+// }
 
-const auth = await getToken();
+// const auth = await getToken();
 
-if (auth.token && auth.refresh_token) {
+// if (auth.token && auth.refresh_token) {
-  keycloak.init({
+//   keycloak.init({
-    checkLoginIframe: false,
+//     checkLoginIframe: false,
-    token: auth.token,
+//     token: auth.token,
-    refreshToken: auth.refresh_token,
+//     refreshToken: auth.refresh_token,
-  });
+//   });
-  // .then((authenticated) => {
+// }
-  //   console.log("authenticated", authenticated);
-  //   if (!authenticated) {
-  //     window.location.reload();
-  //   } else {
-  //     console.log("Authenticated");
-  //   }
-  // })
-  // .catch((err) => {
-  //   console.error("Keycloak initialization failed:", err);
-  // });
-}
 
 app.mount("#app");

src/plugins/auth.ts

@@ -0,0 +1,71 @@
+const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY";
+
+interface AuthResponse {
+  access_token: string;
+  expires_in: number;
+  refresh_token: string;
+}
+
+const authenticated = async () => ((await getToken()) ? true : false);
+
+async function setAuthen(r: AuthResponse) {
+  await setCookie(ACCESS_TOKEN, r.access_token, r.expires_in);
+  window.location.href = "/";
+}
+
+async function logout() {
+  await deleteCookie(ACCESS_TOKEN);
+  window.location.href = "/login";
+}
+
+async function getToken() {
+  return getCookie(ACCESS_TOKEN);
+}
+// 2024-08-29T02:55:13.000Z
+function setCookie(name: string, value: any, time: number) {
+  let expires = "";
+  if (time) {
+    const date = new Date();
+    date.setTime(date.getTime() + time * 1000);
+    // date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = "; expires=" + date.toUTCString();
+  }
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+
+function getCookie(name: string) {
+  const nameEQ = name + "=";
+  const ca = document.cookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == " ") c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+  }
+  return null;
+}
+
+function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
+
+async function tokenParsed() {
+  const token = await getCookie(ACCESS_TOKEN);
+  if (!token) {
+    return null;
+  }
+  const base64Url = token.split(".")[1];
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+  const jsonPayload = decodeURIComponent(
+    window
+      .atob(base64)
+      .split("")
+      .map(function (c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      })
+      .join("")
+  );
+
+  return JSON.parse(jsonPayload);
+}
+
+export { getToken, authenticated, logout, setAuthen, tokenParsed };

src/plugins/axios.ts

@@ -1,25 +1,25 @@
-import axios from "axios"
+import axios from "axios";
-import config from "process"
+import config from "process";
-// import { dotnetPath } from "../path/axiosPath";
+
-// import { getToken } from "@baloise/vue-keycloak";
+import { getToken } from "./auth";
-import keycloak from "../plugins/keycloak"
 
 const axiosInstance = axios.create({
-    withCredentials: false,
+  withCredentials: false,
-})
+});
 
 // axiosInstance.defaults.baseURL = dotnetPath;
 axiosInstance.interceptors.request.use(
-    async (config) => {
+  async (config) => {
-        const token = await keycloak.token
+    const token = await getToken();
-        config.headers = {
-            Authorization: `Bearer ${token}`,
-        }
-        return config
-    },
-    (error) => {
-        Promise.reject(error)
-    }
-)
 
-export default axiosInstance
+    config.headers = {
+      Authorization: `Bearer ${token}`,
+    };
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
+
+export default axiosInstance;

src/plugins/checkPermission.ts

@@ -1,10 +1,8 @@
-import keycloak from "@/plugins/keycloak";
+const checkPermission = (array2: string[], token: any): boolean => {
+  if (token && token.role) {
+    const array1: string[] = token?.role;
 
-const checkPermission = (array2: string[]): boolean => {
+    return array1 ? array1.some((element) => array2.includes(element)) : false;
-  if (keycloak.tokenParsed) {
-    const array1: string[] = keycloak.tokenParsed?.role;
-
-    return array1.some((element) => array2.includes(element));
   } else return false;
 };
 

src/plugins/http.ts

@@ -1,5 +1,6 @@
 import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
-import keycloak, { kcLogout } from "./keycloak";
+
+import { getToken, logout } from "./auth";
 
 const http = Axios.create({
   timeout: 1000000000, // เพิ่มค่า timeout
@@ -12,7 +13,8 @@ http.interceptors.request.use(
   async function (config: AxiosRequestConfig<any>) {
     // await keycloak.updateToken(1);
     config.headers = config.headers ?? {};
-    const token = keycloak.token;
+    const token = await getToken();
+
     // const token = localStorage.getItem("access_token")
     // const token =
     //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
@@ -33,7 +35,7 @@ http.interceptors.response.use(
       // eslint-disable-next-line no-prototype-builtins
       if (error.hasOwnProperty("response")) {
         if (error.response.status === 401 || error.response.status === 403) {
-          kcLogout();
+          logout();
           // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
           // Store.commit("REMOVE_ACCESS_TOKEN")
         }

src/plugins/keycloak.ts

@@ -1,70 +1,70 @@
-// authen with keycloak client
+// // authen with keycloak client
-import Keycloak from "keycloak-js";
+// import Keycloak from "keycloak-js";
 
-const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY";
+// const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY";
-const REFRESH_TOKEN = "BMAHRIS_KEYCLOAK_REFRESH";
+// const REFRESH_TOKEN = "BMAHRIS_KEYCLOAK_REFRESH";
-const keycloakConfig = {
+// const keycloakConfig = {
-  url: import.meta.env.VITE_URL_KEYCLOAK,
+//   url: import.meta.env.VITE_URL_KEYCLOAK,
-  realm: import.meta.env.VITE_REALM_KEYCLOAK,
+//   realm: import.meta.env.VITE_REALM_KEYCLOAK,
-  clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK,
+//   clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK,
-  clientSecret: import.meta.env.VITE_CLIENTSECRET_KEYCLOAK,
+//   clientSecret: import.meta.env.VITE_CLIENTSECRET_KEYCLOAK,
-};
+// };
 
-const keycloak = new Keycloak(keycloakConfig);
+// const keycloak = new Keycloak(keycloakConfig);
 
-async function kcAuthen(access_token: string, refresh_token: string) {
+// async function kcAuthen(access_token: string, refresh_token: string) {
-  await setCookie(ACCESS_TOKEN, access_token, 1);
+//   await setCookie(ACCESS_TOKEN, access_token, 1);
-  await setCookie(REFRESH_TOKEN, refresh_token, 1);
+//   await setCookie(REFRESH_TOKEN, refresh_token, 1);
-  window.location.href = "/login";
+//   window.location.href = "/login";
-}
+// }
 
-async function kcLogout() {
+// async function kcLogout() {
-  await deleteCookie(ACCESS_TOKEN);
+//   await deleteCookie(ACCESS_TOKEN);
-  await deleteCookie(REFRESH_TOKEN);
+//   await deleteCookie(REFRESH_TOKEN);
-  if (keycloak.authenticated !== undefined) {
+//   if (keycloak.authenticated !== undefined) {
-    keycloak.logout();
+//     keycloak.logout();
-  }
+//   }
-  window.location.href = "/login";
+//   window.location.href = "/login";
-}
+// }
 
-async function getToken() {
+// async function getToken() {
-  return {
+//   return {
-    token: getCookie(ACCESS_TOKEN),
+//     token: getCookie(ACCESS_TOKEN),
-    refresh_token: getCookie(REFRESH_TOKEN),
+//     refresh_token: getCookie(REFRESH_TOKEN),
-  };
+//   };
-}
+// }
 
-function setCookie(name: string, value: any, days: number) {
+// function setCookie(name: string, value: any, days: number) {
-  let expires = "";
+//   let expires = "";
-  if (days) {
+//   if (days) {
-    const date = new Date();
+//     const date = new Date();
-    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+//     date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-    expires = "; expires=" + date.toUTCString();
+//     expires = "; expires=" + date.toUTCString();
-  }
+//   }
-  document.cookie = name + "=" + (value || "") + expires + "; path=/";
+//   document.cookie = name + "=" + (value || "") + expires + "; path=/";
-}
+// }
 
-function getCookie(name: string) {
+// function getCookie(name: string) {
-  const nameEQ = name + "=";
+//   const nameEQ = name + "=";
-  const ca = document.cookie.split(";");
+//   const ca = document.cookie.split(";");
-  for (let i = 0; i < ca.length; i++) {
+//   for (let i = 0; i < ca.length; i++) {
-    let c = ca[i];
+//     let c = ca[i];
-    while (c.charAt(0) == " ") c = c.substring(1, c.length);
+//     while (c.charAt(0) == " ") c = c.substring(1, c.length);
-    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+//     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
-  }
+//   }
-  return null;
+//   return null;
-}
+// }
 
-function deleteCookie(name: string) {
+// function deleteCookie(name: string) {
-  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+//   document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
-}
+// }
 
-export default keycloak;
+// export default keycloak;
-export {
+// export {
-  keycloakConfig,
+//   keycloakConfig,
-  getToken,
+//   getToken,
-  kcAuthen,
+//   kcAuthen,
-  kcLogout,
+//   kcLogout,
-  ACCESS_TOKEN,
+//   ACCESS_TOKEN,
-  REFRESH_TOKEN,
+//   REFRESH_TOKEN,
-};
+// };

src/router/index.ts

@@ -11,7 +11,7 @@ import ModuleLogs from "@/modules/03_logs/router";
 import ModuleSystem from "@/modules/04_system/router";
 
 // TODO: ใช้หรือไม่?
-import keycloak, { kcLogout } from "@/plugins/keycloak";
+import { authenticated, logout } from "@/plugins/auth";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -76,10 +76,11 @@ const router = createRouter({
 });
 
 // authen with keycloak client
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   if (to.meta.Auth) {
-    if (keycloak.authenticated === undefined && to.meta.Auth) {
+    const checkAuthen = await authenticated();
-      kcLogout();
+    if (!checkAuthen && to.meta.Auth) {
+      logout();
     }
   } else {
     next();

src/views/MainLayout.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, onUnmounted, watch, onBeforeMount } from "vue";
-import keycloak, { kcLogout } from "@/plugins/keycloak";
 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)
+    const params: any = await {
-    // console.log('accessToken', route.query.accessToken)
+      access_token: route.query.token,
-    kcAuthen(route.query.token.toString(), route.query.accessToken.toString());
+      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(
+    .post(`${import.meta.env.VITE_API_URI_CONFIG}/org/login`, formdata, {
-      `${keycloakConfig.url}/realms/${keycloakConfig.realm}/protocol/openid-connect/token`,
+      headers: {
-      formdata,
+        "Content-Type": "application/x-www-form-urlencoded",
-      {
+      },
-        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: {