fixing check token

src/main.ts

@@ -3,7 +3,7 @@ import App from '@/App.vue'
 import '@/registerServiceWorker'
 import router from '@/router'
 import { createPinia } from 'pinia'
-import keycloak from '@/plugins/keycloak'
+import keycloak, { getToken } from '@/plugins/keycloak'
 
 import { Quasar, Dialog, Notify, Loading } from 'quasar'
 import '@vuepic/vue-datepicker/dist/main.css'
@@ -49,16 +49,15 @@ function getCookie(name: string) {
   return null
 }
 
-const kcToken = getCookie('BMAHRIS_KEYCLOAK_IDENTITY')
-const kcRefreshToken = getCookie('BMAHRIS_KEYCLOAK_REFRESH')
+const auth = await getToken()
 
-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/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
@@ -31,7 +31,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

@@ -4,7 +4,7 @@ import MapView from '@/views/MapView.vue'
 import MainView from '@/views/MainView.vue'
 const loginView = () => import('@/views/login.vue')
 
-import keycloak from '@/plugins/keycloak'
+import keycloak, { kcLogout } from '@/plugins/keycloak'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -49,11 +49,6 @@ const router = createRouter({
             Auth: false,
           },
         },
-        {
-          path: '/auth',
-          name: 'auth',
-          component: () => import('@/views/auth.vue'),
-        },
         /**
          * 404 Not Found
          * ref: https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route
@@ -77,6 +72,11 @@ const router = createRouter({
         Auth: false,
       },
     },
+    {
+      path: '/auth',
+      name: 'auth',
+      component: () => import('@/views/auth.vue'),
+    },
   ],
 })
 
@@ -87,7 +87,7 @@ 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/MainView.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
-import keycloak from '@/plugins/keycloak'
+import keycloak, { kcLogout } from '@/plugins/keycloak'
 import http from '@/plugins/http'
 import config from '@/app.config'
 
@@ -97,18 +97,10 @@ function onClickLogout() {
     ok: 'ยืนยัน',
     persistent: true,
   }).onOk(async () => {
-    keycloak.logout()
-    // authen with keycloak client
-    await deleteCookie('BMAHRIS_KEYCLOAK_IDENTITY')
-    await deleteCookie('BMAHRIS_KEYCLOAK_REFRESH')
-    window.location.href = '/login'
+    kcLogout()
   })
 }
 
-function deleteCookie(name: string) {
-  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
-}
-
 const thaiOptions: Intl.DateTimeFormatOptions = {
   hour: '2-digit',
   minute: '2-digit',

src/views/auth.vue

@@ -1,27 +1,16 @@
 <script setup lang="ts">
+import { kcAuthen } from '@/plugins/keycloak'
 import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
 
-function setCookie(name: string, value: any, days: number) {
-  let expires = ''
-  if (days) {
-    const date = new Date()
-    date.setTime(date.getTime() + days * 24 * 60 * 55 * 1000)
-    expires = '; expires=' + date.toUTCString()
-  }
-  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 = '/'
+  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>
 

src/views/login.vue

@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import axios from 'axios'
-import keycloak, { keycloakConfig } from '@/plugins/keycloak'
+import keycloak, { kcAuthen, keycloakConfig } 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 * 55 * 1000)
-    expires = '; expires=' + date.toUTCString()
-  }
-  document.cookie = name + '=' + (value || '') + expires + '; path=/'
-}
-
 const username = ref<string>('')
 const password = ref<string>('')
 async function onSubmit() {
@@ -45,9 +35,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, 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง')
@@ -55,14 +43,6 @@ 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(() => {