first commit

src/plugins/axios.ts

@@ -0,0 +1,25 @@
+import axios from "axios"
+import config from "process"
+// import { dotnetPath } from "../path/axiosPath";
+// import { getToken } from "@baloise/vue-keycloak";
+import keycloak from "../plugins/keycloak"
+
+const axiosInstance = axios.create({
+    withCredentials: false,
+})
+
+// axiosInstance.defaults.baseURL = dotnetPath;
+axiosInstance.interceptors.request.use(
+    async (config) => {
+        const token = await keycloak.token
+        config.headers = {
+            Authorization: `Bearer ${token}`,
+        }
+        return config
+    },
+    (error) => {
+        Promise.reject(error)
+    }
+)
+
+export default axiosInstance

src/plugins/filters.ts

@@ -0,0 +1,22 @@
+/**
+ * GLOABL Filters
+ *   - ไฟล์นี้จะไว้เก็บฟังก์ชันง่าย ๆ พวก Helper Functions ทั้งหลาย
+ */
+
+
+const filters = {
+
+	/**
+	 * ฟังก์ชัน compactNumber ใช้แปลงตัวเลขยาว ๆ ให้กลายเป็นเลขสั้น ๆ แบบที่พวก Social Media ชอบใช้กัน เช่น 1,000 แปลงเป็น 1K หรือ 1,000,000 แปลงเป็น 1M
+	 * วิธีใช้ : {{ $filters.compactNumber(value) }}
+	 *
+	 * @param val รับค่าพารามิเตอร์เป็นตัวแปรชนิดตัวเลข
+	 * @returns คืนค่าเป็นตัวเลขที่แปลงค่าแล้ว
+	 */
+	compactNumber (val: number) {
+		const formatter = Intl.NumberFormat('en', { notation: 'compact'})
+		return formatter.format(val)
+	}
+}
+
+export default filters;

src/plugins/http.ts

@@ -0,0 +1,45 @@
+import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
+import keycloak from "./keycloak";
+
+const http = Axios.create({
+  timeout: 1000000000, // เพิ่มค่า timeout
+  headers: {
+    "X-Requested-With": "XMLHttpRequest",
+  },
+});
+
+http.interceptors.request.use(
+  async function (config: AxiosRequestConfig<any>) {
+    await keycloak.updateToken(1);
+    config.headers = config.headers ?? {};
+    const token = keycloak.token;
+    // const token = localStorage.getItem("access_token")
+    // const token =
+    //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
+    if (token) config.headers.Authorization = `Bearer ${token}`;
+    return config;
+  },
+  function (error: any) {
+    return Promise.reject(error);
+  }
+);
+
+http.interceptors.response.use(
+  function (response: AxiosResponse<any, any>) {
+    return response;
+  },
+  function (error: any) {
+    if (typeof error !== undefined) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (error.hasOwnProperty("response")) {
+        if (error.response.status === 401 || error.response.status === 403) {
+          // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
+          // Store.commit("REMOVE_ACCESS_TOKEN")
+        }
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default http;

src/plugins/keycloak.ts

@@ -0,0 +1,23 @@
+/**
+ * front connect to keycloak
+ */
+import Keycloak from "keycloak-js";
+// import config from "../app.config";
+// import http from "../shared/http";
+// import router from "../router";
+
+const initOptions = {
+  //   url: "https://keycloak.frappet.synology.me/auth/",
+  realm: "bma-ehr",
+  clientId: "bma-ehr-vue3",
+  url: "https://id.frappet.synology.me/",
+  //   realm: "bma-ehr-exam",
+  //   clientId: "bma-ehr-exam-vue3",
+}; //option keycloak ที่จะ connect
+
+const keycloak = Keycloak(initOptions);
+
+keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
+
+await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }); //ทำการ connect keycloak
+export default keycloak;