fixing check token

src/main.ts

@@ -9,7 +9,7 @@ import "@vuepic/vue-datepicker/dist/main.css";
 
 import "quasar/src/css/index.sass";
 import http from "./plugins/http";
-import keycloak from "@/plugins/keycloak";
+import keycloak, { getToken } from "@/plugins/keycloak";
 
 // import OpenLayersMap from "vue3-openlayers";
 
@@ -43,28 +43,14 @@ app.component(
 app.config.globalProperties.$http = http;
 
 // authen with keycloak client
-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;
-}
+const auth = await getToken();
 
-const kcToken = getCookie("BMAHRIS_KEYCLOAK_IDENTITY");
-const kcRefreshToken = getCookie("BMAHRIS_KEYCLOAK_REFRESH");
-
-if (kcToken && kcRefreshToken) {
+if (auth.token && auth.refresh_token) {
   keycloak.init({
-    // onLoad: 'login-required',
     checkLoginIframe: false,
-    token: kcToken,
-    refreshToken: kcRefreshToken,
+    token: auth.token,
+    refreshToken: auth.refresh_token,
   });
-
   // .then((authenticated) => {
   //   console.log("authenticated", authenticated);
   //   if (!authenticated) {

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",
@@ -10,19 +12,59 @@ const keycloakConfig = {
 
 const keycloak = new Keycloak(keycloakConfig);
 
-async function kcLogout() {
-  await deleteCookie("BMAHRIS_KEYCLOAK_IDENTITY");
-  await deleteCookie("BMAHRIS_KEYCLOAK_REFRESH");
+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, kcLogout };
+export {
+  keycloakConfig,
+  getToken,
+  kcAuthen,
+  kcLogout,
+  ACCESS_TOKEN,
+  REFRESH_TOKEN,
+};

src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 
 const MainLayout = () => import("@/views/MainLayout.vue");
 const Dashboard = () => import("@/modules/01_dashboard/views/Dashboard.vue");
-const TestPage = () => import("@/modules/01_dashboard/views/test.vue");
+const Error404NotFound = () => import("@/views/Error404NotFound.vue");
 const loginMain = () => import("@/views/login.vue");
 
 import ModuleTransfer from "@/modules/02_transfer/router";
@@ -38,15 +38,6 @@ const router = createRouter({
             Key: [7],
           },
         },
-        {
-          path: "/test",
-          name: "test",
-          component: TestPage,
-          meta: {
-            Auth: true,
-            Key: [7],
-          },
-        },
 
         ...ModuleTransfer,
         ...ModuleRetire,
@@ -63,22 +54,33 @@ const router = createRouter({
         ...ModulePortfolio,
       ],
     },
+    {
+      // path: "/:catchAll(.*)*", // TODO: ใช้ pathMatch แทนตามในเอกสารแนะนำ คงไว้เผื่อจำเป็น
+      path: "/:pathMatch(.*)*",
+      component: Error404NotFound,
+    },
     {
       path: "/login",
       name: "loginMain",
       component: loginMain,
       meta: {
         Auth: false,
-        Key: [7],
       },
     },
+    {
+      path: "/auth",
+      name: "auth",
+      component: () => import("@/views/auth.vue"),
+    },
   ],
 });
 
 // authen with keycloak client
 router.beforeEach((to, from, next) => {
-  if (keycloak.authenticated === undefined && to.meta.Auth) {
-    kcLogout();
+  if (to.meta.Auth) {
+    if (keycloak.authenticated === undefined && to.meta.Auth) {
+      kcLogout();
+    }
   } else {
     next();
   }

src/stores/mixin.ts

@@ -416,7 +416,7 @@ export const useCounterMixin = defineStore("mixin", () => {
                 component: CustomComponent,
                 componentProps: {
                   title: `พบข้อผิดพลาด`,
-                  message: msg,
+                  message: text,
                   icon: "warning",
                   color: "red",
                   onlycancel: true,

src/views/Error404NotFound.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Error404NotFound",
+});
+</script>
+
+<template>
+  <div
+    class="fullscreen bg-blue-10 text-white text-center q-pa-md flex flex-center"
+  >
+    <div>
+      <div class="text-h1">ไม่พบหน้าที่ต้องการ</div>
+      <div class="text-h2">(404 Page Not Found)</div>
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="กลับไปหน้าหลัก"
+        no-caps
+      />
+    </div>
+  </div>
+</template>

src/views/auth.vue

@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { onMounted } from "vue";
+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()
-    date.setTime(date.getTime() + days * 24 * 60 * 55 * 1000)
-    expires = '; expires=' + date.toUTCString()
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 55 * 1000);
+    expires = "; expires=" + date.toUTCString();
   }
-  document.cookie = name + '=' + (value || '') + expires + '; path=/'
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
 }
 
-onMounted(async () => {
-  console.log('query', route.query.token)
-  console.log('accessToken', route.query.accessToken)
-
-  setCookie('BMAHRIS_KEYCLOAK_IDENTITY', route.query.token, 1)
-  setCookie('BMAHRIS_KEYCLOAK_REFRESH', route.query.accessToken, 1)
-
-  window.location.href = '/'
-})
+onMounted(() => {
+  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());
+  }
+});
 </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";
@@ -13,16 +13,6 @@ const $q = useQuasar(); //ใช้ noti quasar
 
 const { showLoader, hideLoader, messageError } = mixin;
 
-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=/";
-}
-
 const username = ref<string>("");
 const password = ref<string>("");
 async function onSubmit() {
@@ -49,9 +39,7 @@ async function onSubmit() {
       }
     )
     .then(async (res) => {
-      await setCookie("BMAHRIS_KEYCLOAK_IDENTITY", res.data.access_token, 1);
-      await setCookie("BMAHRIS_KEYCLOAK_REFRESH", res.data.refresh_token, 1);
-      window.location.href = "/";
+      kcAuthen(res.data.access_token, res.data.refresh_token);
     })
     .catch((err) => {
       messageError($q, err, "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
@@ -59,19 +47,10 @@ 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("/");
   }
 });