diff --git a/src/main.ts b/src/main.ts index 0073e2c5..338e5129 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,7 +3,6 @@ import App from "./App.vue"; import router from "./router"; import { Dialog, Notify, Quasar, Loading } from "quasar"; import "./quasar-user-options"; -import keycloak, { getToken } from "@/plugins/keycloak"; import qDraggableTable from "quasar-ui-q-draggable-table"; import "quasar-ui-q-draggable-table/dist/index.css"; @@ -89,36 +88,25 @@ 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; -} +// 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 auth = await getToken(); -if (auth.token && auth.refresh_token) { - keycloak.init({ - checkLoginIframe: false, - token: auth.token, - refreshToken: auth.refresh_token, - }); - // .then((authenticated) => { - // console.log("authenticated", authenticated); - // if (!authenticated) { - // window.location.reload(); - // } else { - // console.log("Authenticated"); - // } - // }) - // .catch((err) => { - // console.error("Keycloak initialization failed:", err); - // }); -} +// if (auth.token && auth.refresh_token) { +// keycloak.init({ +// checkLoginIframe: false, +// token: auth.token, +// refreshToken: auth.refresh_token, +// }); +// } app.mount("#app"); diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts new file mode 100644 index 00000000..7d6e7f28 --- /dev/null +++ b/src/plugins/auth.ts @@ -0,0 +1,71 @@ +const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY"; + +interface AuthResponse { + access_token: string; + expires_in: number; + refresh_token: string; +} + +const authenticated = async () => ((await getToken()) ? true : false); + +async function setAuthen(r: AuthResponse) { + await setCookie(ACCESS_TOKEN, r.access_token, r.expires_in); + window.location.href = "/"; +} + +async function logout() { + await deleteCookie(ACCESS_TOKEN); + window.location.href = "/login"; +} + +async function getToken() { + return getCookie(ACCESS_TOKEN); +} +// 2024-08-29T02:55:13.000Z +function setCookie(name: string, value: any, time: number) { + let expires = ""; + if (time) { + const date = new Date(); + date.setTime(date.getTime() + time * 1000); + // 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=/;`; +} + +async function tokenParsed() { + const token = await getCookie(ACCESS_TOKEN); + if (!token) { + return null; + } + const base64Url = token.split(".")[1]; + const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/"); + const jsonPayload = decodeURIComponent( + window + .atob(base64) + .split("") + .map(function (c) { + return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2); + }) + .join("") + ); + + return JSON.parse(jsonPayload); +} + +export { getToken, authenticated, logout, setAuthen, tokenParsed }; diff --git a/src/plugins/axios.ts b/src/plugins/axios.ts index 79bba4e1..32e56385 100644 --- a/src/plugins/axios.ts +++ b/src/plugins/axios.ts @@ -1,25 +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" +import axios from "axios"; +import config from "process"; + +import { getToken } from "./auth"; const axiosInstance = axios.create({ - withCredentials: false, -}) + 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) - } -) + async (config) => { + const token = await getToken(); -export default axiosInstance + config.headers = { + Authorization: `Bearer ${token}`, + }; + return config; + }, + (error) => { + Promise.reject(error); + } +); + +export default axiosInstance; diff --git a/src/plugins/checkPermission.ts b/src/plugins/checkPermission.ts index 594d3c2f..9b711e35 100644 --- a/src/plugins/checkPermission.ts +++ b/src/plugins/checkPermission.ts @@ -1,10 +1,8 @@ -import keycloak from "@/plugins/keycloak"; +const checkPermission = (array2: string[], token: any): boolean => { + if (token && token.role) { + const array1: string[] = token?.role; -const checkPermission = (array2: string[]): boolean => { - if (keycloak.tokenParsed) { - const array1: string[] = keycloak.tokenParsed?.role; - - return array1.some((element) => array2.includes(element)); + return array1 ? array1.some((element) => array2.includes(element)) : false; } else return false; }; diff --git a/src/plugins/http.ts b/src/plugins/http.ts index 1e65294e..44979c20 100644 --- a/src/plugins/http.ts +++ b/src/plugins/http.ts @@ -1,5 +1,6 @@ import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios"; -import keycloak, { kcLogout } from "./keycloak"; + +import { getToken, logout } from "./auth"; const http = Axios.create({ timeout: 1000000000, // เพิ่มค่า timeout @@ -12,7 +13,8 @@ http.interceptors.request.use( async function (config: AxiosRequestConfig) { // await keycloak.updateToken(1); config.headers = config.headers ?? {}; - const token = keycloak.token; + const token = await getToken(); + // const token = localStorage.getItem("access_token") // const token = // "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA"; @@ -33,7 +35,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) { - kcLogout(); + logout(); // Store.commit("SET_ERROR_MESSAGE", error.response.data.message); // Store.commit("REMOVE_ACCESS_TOKEN") } diff --git a/src/plugins/keycloak.ts b/src/plugins/keycloak.ts index 52bd62db..35ac5c3f 100644 --- a/src/plugins/keycloak.ts +++ b/src/plugins/keycloak.ts @@ -1,70 +1,70 @@ -// authen with keycloak client -import Keycloak from "keycloak-js"; +// // authen with keycloak client +// import Keycloak from "keycloak-js"; -const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY"; -const REFRESH_TOKEN = "BMAHRIS_KEYCLOAK_REFRESH"; -const keycloakConfig = { - url: import.meta.env.VITE_URL_KEYCLOAK, - realm: import.meta.env.VITE_REALM_KEYCLOAK, - clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK, - clientSecret: import.meta.env.VITE_CLIENTSECRET_KEYCLOAK, -}; +// const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY"; +// const REFRESH_TOKEN = "BMAHRIS_KEYCLOAK_REFRESH"; +// const keycloakConfig = { +// url: import.meta.env.VITE_URL_KEYCLOAK, +// realm: import.meta.env.VITE_REALM_KEYCLOAK, +// clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK, +// clientSecret: import.meta.env.VITE_CLIENTSECRET_KEYCLOAK, +// }; -const keycloak = new Keycloak(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 = "/login"; -} +// 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 = "/login"; +// } -async function kcLogout() { - await deleteCookie(ACCESS_TOKEN); - await deleteCookie(REFRESH_TOKEN); - if (keycloak.authenticated !== undefined) { - keycloak.logout(); - } - window.location.href = "/login"; -} +// 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), - }; -} +// 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 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 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=/;`; -} +// function deleteCookie(name: string) { +// document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`; +// } -export default keycloak; -export { - keycloakConfig, - getToken, - kcAuthen, - kcLogout, - ACCESS_TOKEN, - REFRESH_TOKEN, -}; +// export default keycloak; +// export { +// keycloakConfig, +// getToken, +// kcAuthen, +// kcLogout, +// ACCESS_TOKEN, +// REFRESH_TOKEN, +// }; diff --git a/src/router/index.ts b/src/router/index.ts index 1fd35124..ac659cbb 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -11,7 +11,7 @@ import ModuleLogs from "@/modules/03_logs/router"; import ModuleSystem from "@/modules/04_system/router"; // TODO: ใช้หรือไม่? -import keycloak, { kcLogout } from "@/plugins/keycloak"; +import { authenticated, logout } from "@/plugins/auth"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -76,10 +76,11 @@ const router = createRouter({ }); // authen with keycloak client -router.beforeEach((to, from, next) => { +router.beforeEach(async (to, from, next) => { if (to.meta.Auth) { - if (keycloak.authenticated === undefined && to.meta.Auth) { - kcLogout(); + const checkAuthen = await authenticated(); + if (!checkAuthen && to.meta.Auth) { + logout(); } } else { next(); diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue index ad925960..db51afe2 100644 --- a/src/views/MainLayout.vue +++ b/src/views/MainLayout.vue @@ -1,11 +1,11 @@ diff --git a/src/views/login.vue b/src/views/login.vue index 60443d75..c13c489b 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -2,11 +2,11 @@