remove keycloak use cookie auth

src/views/MainLayout.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from "vue";
-import keycloak, { kcLogout } from "@/plugins/keycloak";
 import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useMenuDataStore } from "@/stores/menuList";
+import { tokenParsed, logout } from "@/plugins/auth";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -231,8 +231,12 @@ onMounted(async () => {
   await fetchSys();
   await fetchPermissionsSys();
 
-  if (keycloak.tokenParsed) {
-    await fetchroleUser(keycloak.tokenParsed.role);
+  const user = await tokenParsed();
+  if (user) {
+    fullname.value = user.name;
+    role.value = user.role;
+
+    await fetchroleUser(user.role);
   }
   await fetchmsgNoread();
 
@@ -405,28 +409,20 @@ const tagClickPlacement = (tag: string) => {
 //**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
 
 /**
- * logout keycloak
+ * logout
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
   dialogConfirm(
     $q,
     async () => {
-      kcLogout();
+      logout();
     },
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่?"
   );
 };
 
-/**
- * ดิงชื่อผู้ใช้งานจาก 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();

src/views/auth.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kcAuthen } from "@/plugins/keycloak";
+import { setAuthen } from "@/plugins/auth";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
 
@@ -7,9 +7,12 @@ const route = useRoute();
 
 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());
+    const params = await {
+      access_token: route.query.token,
+      expires_in: route.query.expires ? route.query.expires : 36000,
+      refresh_token: route.query.accessToken,
+    };
+    setAuthen(params);
   }
 });
 </script>

src/views/login.vue

@@ -1,12 +1,13 @@
-<!-- authen with keycloak client -->
+<!-- authen with client -->
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import axios from "axios";
-import keycloak, { keycloakConfig, kcAuthen } from "@/plugins/keycloak";
+import { authenticated, tokenParsed, setAuthen } from "@/plugins/auth";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import CustomComponent from "@/components/CustomDialog.vue";
+import env from "@/api/index";
 
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -23,47 +24,47 @@ const isDisplay = ref<boolean>(true); // check display login page
 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(
-      `${keycloakConfig.url}/realms/${keycloakConfig.realm}/protocol/openid-connect/token`,
-      formdata,
-      {
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-      }
-    )
-    .then((res) => {
-      kcAuthen(res.data.access_token, res.data.refresh_token);
+    .post(`${env.API_URI}/org/login`, formdata, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    })
+    .then(async (res) => {
+      setAuthen(res.data.result);
     })
     .catch((err) => {
-      messageError($q, err, "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
+      $q.dialog({
+        component: CustomComponent,
+        componentProps: {
+          title: `ข้อความแจ้งเตือน`,
+          message: `${err.response.data.message}`,
+          icon: "warning",
+          color: "red",
+          onlycancel: true,
+        },
+      });
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-onMounted(() => {
-  // check authen keycloak and role of system
-  if (keycloak.authenticated) {
+onMounted(async () => {
+  // check authen and role of system
+  const checkAuthen = await authenticated();
+  if (checkAuthen) {
     isDisplay.value = false;
     showLoader();
-    if (keycloak.tokenParsed) {
+    const user = await tokenParsed();
+    if (user) {
       const checkRole = (element: string) => element === "STAFF";
 
       // ถ้าไม่มีสิทธิ์เข้าใช้งานระบบ แสดงข้อความแจ้งเตือน
-      if (keycloak.tokenParsed.role.findIndex(checkRole) === -1) {
+      if (user.role.findIndex(checkRole) === -1) {
         $q.dialog({
           component: CustomComponent,
           componentProps: {