updated check token

src/main.ts

@@ -3,7 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import { Dialog, Notify, Quasar, Loading } from "quasar";
 import "./quasar-user-options";
-import keycloak from "@/plugins/keycloak";
+import keycloak, { getToken } from "@/plugins/keycloak";
 
 import qDraggableTable from "quasar-ui-q-draggable-table";
 import "quasar-ui-q-draggable-table/dist/index.css";
@@ -100,15 +100,13 @@ function getCookie(name: string) {
   return null;
 }
 
-const kcToken = getCookie("BMAHRIS_KEYCLOAK_IDENTITY");
+const auth = await getToken();
-const kcRefreshToken = getCookie("BMAHRIS_KEYCLOAK_REFRESH");
 
-if (kcToken && kcRefreshToken) {
+if (auth.token && auth.refresh_token) {
   keycloak.init({
-    // onLoad: 'login-required',
     checkLoginIframe: false,
-    token: kcToken,
+    token: auth.token,
-    refreshToken: kcRefreshToken,
+    refreshToken: auth.refresh_token,
   });
   // .then((authenticated) => {
   //   console.log("authenticated", authenticated);

src/plugins/http.ts

@@ -1,5 +1,5 @@
 import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
-import keycloak from "./keycloak";
+import keycloak, { kcLogout } from "./keycloak";
 
 const http = Axios.create({
   timeout: 1000000000, // เพิ่มค่า timeout
@@ -33,7 +33,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) {
-          window.location.href = "/login";
+          kcLogout();
           // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
           // Store.commit("REMOVE_ACCESS_TOKEN")
         }

src/plugins/keycloak.ts

@@ -1,6 +1,8 @@
 // authen with keycloak client
 import Keycloak from "keycloak-js";
 
+const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY";
+const REFRESH_TOKEN = "BMAHRIS_KEYCLOAK_REFRESH";
 const keycloakConfig = {
   url: "https://id.frappet.synology.me",
   realm: "bma-ehr",
@@ -9,5 +11,60 @@ const keycloakConfig = {
 };
 
 const keycloak = new Keycloak(keycloakConfig);
+
+async function kcAuthen(access_token: string, refresh_token: string) {
+  await setCookie(ACCESS_TOKEN, access_token, 1);
+  await setCookie(REFRESH_TOKEN, refresh_token, 1);
+  window.location.href = "/";
+}
+
+async function kcLogout() {
+  await deleteCookie(ACCESS_TOKEN);
+  await deleteCookie(REFRESH_TOKEN);
+  if (keycloak.authenticated !== undefined) {
+    keycloak.logout();
+  }
+  window.location.href = "/login";
+}
+
+async function getToken() {
+  return {
+    token: getCookie(ACCESS_TOKEN),
+    refresh_token: getCookie(REFRESH_TOKEN),
+  };
+}
+
+function setCookie(name: string, value: any, days: number) {
+  let expires = "";
+  if (days) {
+    const date = new Date();
+    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=/;`;
+}
+
 export default keycloak;
-export { keycloakConfig };
+export {
+  keycloakConfig,
+  getToken,
+  kcAuthen,
+  kcLogout,
+  ACCESS_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 from "@/plugins/keycloak";
+import keycloak, { kcLogout } from "@/plugins/keycloak";
 import checkPermission from "@/plugins/checkPermission";
 
 const router = createRouter({
@@ -57,6 +57,11 @@ const router = createRouter({
         Auth: false,
       },
     },
+    {
+      path: "/auth",
+      name: "auth",
+      component: () => import("@/views/auth.vue"),
+    },
   ],
 
   scrollBehavior(to, from, savedPosition) {
@@ -75,7 +80,7 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
   if (to.meta.Auth) {
     if (keycloak.authenticated === undefined && to.meta.Auth) {
-      window.location.href = "/login";
+      kcLogout();
     }
   } else {
     next();

src/views/MainLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from "vue";
-import keycloak from "@/plugins/keycloak";
+import keycloak, { kcLogout } from "@/plugins/keycloak";
 import { useRoute } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
@@ -261,10 +261,7 @@ const doLogout = () => {
   dialogConfirm(
     $q,
     async () => {
-      keycloak.logout();
+      kcLogout();
-      await deleteCookie("BMAHRIS_KEYCLOAK_IDENTITY");
-      await deleteCookie("BMAHRIS_KEYCLOAK_REFRESH");
-      window.location.href = "/login";
     },
     // keycloak.logout({
     //   redirectUri: `${window.location.protocol}//${window.location.host}/`,

src/views/auth.vue

@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted } from "vue";
-import { useRoute } from 'vue-router'
+import { useRoute } from "vue-router";
+import { kcAuthen } from "@/plugins/keycloak";
 
-const route = useRoute()
+const route = useRoute();
 
 function setCookie(name: string, value: any, days: number) {
-  let expires = ''
+  let expires = "";
   if (days) {
-    const date = new Date()
+    const date = new Date();
-    date.setTime(date.getTime() + days * 24 * 60 * 55 * 1000)
+    date.setTime(date.getTime() + days * 24 * 60 * 55 * 1000);
-    expires = '; expires=' + date.toUTCString()
+    expires = "; expires=" + date.toUTCString();
   }
-  document.cookie = name + '=' + (value || '') + expires + '; path=/'
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
 }
 
 onMounted(async () => {
-  console.log('query', route.query.token)
+  if (route.query.token && route.query.accessToken) {
-  console.log('accessToken', route.query.accessToken)
+    // console.log('query', route.query.token)
-
+    // console.log('accessToken', route.query.accessToken)
-  setCookie('BMAHRIS_KEYCLOAK_IDENTITY', route.query.token, 1)
+    kcAuthen(route.query.token.toString(), route.query.accessToken.toString());
-  setCookie('BMAHRIS_KEYCLOAK_REFRESH', route.query.accessToken, 1)
+  }
-
+});
-  window.location.href = '/'
-})
 </script>
 
 <template>

src/views/login.vue

@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import axios from "axios";
-import keycloak, { keycloakConfig } from "@/plugins/keycloak";
+import keycloak, { keycloakConfig, kcAuthen } from "@/plugins/keycloak";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -48,10 +48,8 @@ async function onSubmit() {
         },
       }
     )
-    .then(async (res) => {
+    .then((res) => {
-      await setCookie("BMAHRIS_KEYCLOAK_IDENTITY", res.data.access_token, 1);
+      kcAuthen(res.data.access_token, res.data.refresh_token);
-      await setCookie("BMAHRIS_KEYCLOAK_REFRESH", res.data.refresh_token, 1);
-      window.location.href = "/";
     })
     .catch((err) => {
       messageError($q, err, "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
@@ -59,18 +57,11 @@ async function onSubmit() {
     .finally(() => {
       hideLoader();
     });
-
-  // if (response.status !== 200) {
-  //   messageError($q, err)
-  // } else {
-  //   await setCookie('BMAHRIS_KEYCLOAK_IDENTITY', response.data.access_token, 1)
-  //   await setCookie('BMAHRIS_KEYCLOAK_REFRESH', response.data.refresh_token, 1)
-  //   router.push('/')
-  // }
 }
 
 onMounted(() => {
   if (keycloak.authenticated) {
+    console.log("authenticated", keycloak.authenticated);
     router.push("/");
   }
 });