updateAuthen

src/views/auth.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+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 = '/'
+})
+</script>
+
+<template>
+  <div></div>
+</template>

src/views/login.vue

@@ -1,42 +1,42 @@
 <!-- authen with keycloak client -->
 <script setup lang="ts">
-import { ref } from 'vue'
-import axios from 'axios'
-import { keycloakConfig } from '@/plugins/keycloak'
-import { useRouter } from 'vue-router'
-import { useQuasar } from 'quasar'
-import { useCounterMixin } from '@/stores/mixin'
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import keycloak, { keycloakConfig } from "@/plugins/keycloak";
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 
-const router = useRouter()
-const mixin = useCounterMixin()
-const $q = useQuasar() //ใช้ noti quasar
+const router = useRouter();
+const mixin = useCounterMixin();
+const $q = useQuasar(); //ใช้ noti quasar
 
-const { showLoader, hideLoader, messageError } = mixin
+const { showLoader, hideLoader, messageError } = mixin;
 
 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 * 60 * 1000)
-    expires = '; expires=' + date.toUTCString()
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = "; expires=" + date.toUTCString();
   }
-  document.cookie = name + '=' + (value || '') + expires + '; path=/'
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
 }
 
-const username = ref<string>('')
-const password = ref<string>('')
+const username = ref<string>("");
+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')
+  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)
+    "requested_token_type",
+    "urn:ietf:params:oauth:token-type:refresh_token"
+  );
+  formdata.append("username", username.value);
+  formdata.append("password", password.value);
 
   await axios
     .post(
@@ -44,21 +44,21 @@ async function onSubmit() {
       formdata,
       {
         headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
+          "Content-Type": "application/x-www-form-urlencoded",
         },
       }
     )
     .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 = '/'
+      await setCookie("BMAHRIS_KEYCLOAK_IDENTITY", res.data.access_token, 1);
+      await setCookie("BMAHRIS_KEYCLOAK_REFRESH", res.data.refresh_token, 1);
+      window.location.href = "/";
     })
     .catch((err) => {
-      messageError($q, err, 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง')
+      messageError($q, err, "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
     })
     .finally(() => {
-      hideLoader()
-    })
+      hideLoader();
+    });
 
   // if (response.status !== 200) {
   //   messageError($q, err)
@@ -68,6 +68,13 @@ async function onSubmit() {
   //   router.push('/')
   // }
 }
+onMounted(() => {
+  if (keycloak.authenticated) {
+    console.log("authenticated", keycloak.authenticated);
+
+    router.push("/");
+  }
+});
 </script>
 
 <template>
@@ -184,8 +191,8 @@ async function onSubmit() {
   margin-bottom: 10px;
 }
 
-input[type='checkbox'],
-input[type='radio'] {
+input[type="checkbox"],
+input[type="radio"] {
   margin: 1px 3px 0 0;
   line-height: normal;
 }
@@ -218,8 +225,8 @@ input[type='radio'] {
   z-index: 1 !important;
 }
 .bg-image {
-  font-family: 'Noto Sans Thai', sans-serif;
-  font-family: 'Noto Sans Thai', sans-serif;
+  font-family: "Noto Sans Thai", sans-serif;
+  font-family: "Noto Sans Thai", sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;