logoutPage
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
37e3c65ff3
commit
76e7cfb39a
4 changed files with 109 additions and 56 deletions
|
|
@ -1,3 +1,6 @@
|
|||
const cookieTokenName = "BMAHRIS_KEYCLOAK_IDENTITY";
|
||||
const cookieTokenRefName = "BMAHRIS_KEYCLOAK_REFRESH";
|
||||
|
||||
// authen with keycloak client
|
||||
function setCookie(name: string, value: string, days: number) {
|
||||
let expires = "";
|
||||
|
|
@ -24,4 +27,4 @@ function deleteCookie(name: string) {
|
|||
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
|
||||
}
|
||||
|
||||
export { setCookie, getCookie, deleteCookie };
|
||||
export { setCookie, getCookie, deleteCookie, cookieTokenName, cookieTokenRefName };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { createRouter, createWebHistory } from "vue-router";
|
||||
const homeView = () => import("@/views/home.vue");
|
||||
const ssoPage = () => import("@/views/sso.vue");
|
||||
const logoutPage = () => import("@/views/logoutPage.vue");
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
|
@ -32,6 +33,14 @@ const router = createRouter({
|
|||
Auth: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/logout",
|
||||
name: "logout-page",
|
||||
component: logoutPage,
|
||||
meta: {
|
||||
Auth: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { deleteCookie, getCookie, setCookie } from "@/plugins/cookie";
|
||||
import {
|
||||
deleteCookie,
|
||||
getCookie,
|
||||
setCookie,
|
||||
cookieTokenName,
|
||||
cookieTokenRefName,
|
||||
} from "@/plugins/cookie";
|
||||
import router from "@/router";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
|
|
@ -20,8 +26,8 @@ import type { DateCards } from "@/interface/index/Main";
|
|||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
|
||||
const cookieTokenName = ref<string>("BMAHRIS_KEYCLOAK_IDENTITY");
|
||||
const cookieTokenRefName = ref<string>("BMAHRIS_KEYCLOAK_REFRESH");
|
||||
// const cookieTokenName = ref<string>("BMAHRIS_KEYCLOAK_IDENTITY");
|
||||
// const cookieTokenRefName = ref<string>("BMAHRIS_KEYCLOAK_REFRESH");
|
||||
const urlAdmin = config.API.URL_ADMIN;
|
||||
const urlUser = config.API.URL_USER;
|
||||
const urlMgt = config.API.URL_MGT;
|
||||
|
|
@ -54,7 +60,7 @@ const token = ref<any>("");
|
|||
const refreshToken = ref<any>("");
|
||||
const name = ref<string>("");
|
||||
async function getName() {
|
||||
const token = await getCookie(cookieTokenName.value);
|
||||
const token = await getCookie(cookieTokenName);
|
||||
if (token) {
|
||||
const base64Url = token.split(".")[1];
|
||||
|
||||
|
|
@ -70,7 +76,7 @@ async function getName() {
|
|||
}
|
||||
|
||||
async function goPage(sys: string, url: string) {
|
||||
const token = await getCookie(cookieTokenName.value);
|
||||
const token = await getCookie(cookieTokenName);
|
||||
const redirectUrl = (route.query.redirectUrl as string) ?? "";
|
||||
|
||||
if (token) {
|
||||
|
|
@ -136,8 +142,8 @@ async function logout() {
|
|||
cancel: true,
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
await deleteCookie(cookieTokenName.value);
|
||||
await deleteCookie(cookieTokenRefName.value);
|
||||
await deleteCookie(cookieTokenName);
|
||||
await deleteCookie(cookieTokenRefName);
|
||||
// ยิง logout เข้าระบบ
|
||||
await postSaveLog("ออกจากระบบ", token.value);
|
||||
window.location.href = `${config.API.URL_SSO}`;
|
||||
|
|
@ -169,9 +175,17 @@ onMounted(async () => {
|
|||
// deleteCookie("BMAHRISADM_KEYCLOAK_IDENTITY");
|
||||
// deleteCookie("BMAHRISCKI_KEYCLOAK_IDENTITY");
|
||||
// deleteCookie("BMAHRISUSER_KEYCLOAK_IDENTITY");
|
||||
const isLogout = route.query?.logout === "true";
|
||||
if (isLogout) {
|
||||
await deleteCookie(cookieTokenName);
|
||||
await deleteCookie(cookieTokenRefName);
|
||||
// ยิง logout เข้าระบบ
|
||||
await postSaveLog("ออกจากระบบ", token);
|
||||
window.location.href = `${config.API.URL_SSO}`;
|
||||
}
|
||||
|
||||
token.value = await getCookie(cookieTokenName.value);
|
||||
refreshToken.value = await getCookie(cookieTokenRefName.value);
|
||||
token.value = await getCookie(cookieTokenName);
|
||||
refreshToken.value = await getCookie(cookieTokenRefName);
|
||||
|
||||
if (!token.value || !refreshToken.value) router.push("/sso");
|
||||
|
||||
|
|
@ -189,8 +203,8 @@ onMounted(async () => {
|
|||
.then(async (res: any) => {
|
||||
if (res.status === 200) {
|
||||
if (res.data.access_token) {
|
||||
setCookie(cookieTokenName.value, res.data.access_token, 1);
|
||||
setCookie(cookieTokenRefName.value, res.data.refresh_token, 1);
|
||||
setCookie(cookieTokenName, res.data.access_token, 1);
|
||||
setCookie(cookieTokenRefName, res.data.refresh_token, 1);
|
||||
|
||||
token.value = await res.data.access_token;
|
||||
refreshToken.value = await res.data.refresh_token;
|
||||
|
|
@ -198,8 +212,8 @@ onMounted(async () => {
|
|||
// ยิง log เข้าระบบ
|
||||
await postSaveLog("เข้าสู่ระบบ", res.data.access_token);
|
||||
} else if (res.data.isLogin) {
|
||||
token.value = await getCookie(cookieTokenName.value);
|
||||
refreshToken.value = await getCookie(cookieTokenRefName.value);
|
||||
token.value = await getCookie(cookieTokenName);
|
||||
refreshToken.value = await getCookie(cookieTokenRefName);
|
||||
}
|
||||
|
||||
const systemkey = route.query.system as string;
|
||||
|
|
@ -331,48 +345,6 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="q-ma-md">
|
||||
<div class="row">
|
||||
{{ fullname }}
|
||||
<q-btn @click="logout()" class="btn_logout">
|
||||
ออกจากระบบ <i class="mdi mdi-logout"></i>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<img src="@/assets/screen1.png" style="width: 100%" />
|
||||
<div class="h-100 py-3">
|
||||
<a @click="goPage('user', urlUser)" class="link">
|
||||
ระบบบริการเจ้าของข้อมูล
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<img src="@/assets/screen2.png" style="width: 100%" />
|
||||
<div class="h-100 py-3">
|
||||
<a @click="goPage('checkin', urlCheckin)" class="link">
|
||||
ระบบลงเวลาปฏิบัติราชการ
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<img src="@/assets/screen3.png" style="width: 100%" />
|
||||
<div class="h-100 py-3">
|
||||
<a @click="goPage('mgt', urlMgt)" class="link"> ระบบบริหารจัดการ </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<img src="@/assets/screen4.png" style="width: 100%" />
|
||||
<div class="h-100 py-3">
|
||||
<a @click="goPage('admin', urlAdmin)" class="link"> ระบบแอดมิน </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
69
src/views/logoutPage.vue
Normal file
69
src/views/logoutPage.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from "vue";
|
||||
|
||||
import config from "@/app.config";
|
||||
import {
|
||||
deleteCookie,
|
||||
cookieTokenName,
|
||||
cookieTokenRefName,
|
||||
} from "@/plugins/cookie";
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// Clear cookies related to authentication
|
||||
await Promise.all([
|
||||
deleteCookie(cookieTokenName),
|
||||
deleteCookie(cookieTokenRefName),
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error("Error during logout:", error);
|
||||
} finally {
|
||||
// Redirect to SSO URL
|
||||
window.location.href = `${config.API.URL_SSO}`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-img h-50 fixed-top" style="z-index: -1">
|
||||
<img
|
||||
alt=""
|
||||
src="https://bma-sso.frappet.synology.me/images/line2.png"
|
||||
class="img_absolute_line"
|
||||
/>
|
||||
</div>
|
||||
<div class="fullscreen flex flex-center">
|
||||
<q-card bordered class="my-card">
|
||||
<q-card-section>
|
||||
<q-icon name="logout" color="primary" size="56px" />
|
||||
<div class="text-h6 q-mt-md q-mb-xs">กำลังออกจากระบบ...</div>
|
||||
<q-spinner-dots color="primary" size="48px" class="q-mt-sm" />
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-card {
|
||||
width: 40%;
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
border-radius: 12px; /* มุมโค้งมน */
|
||||
}
|
||||
|
||||
.img_absolute_line {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
background: rgb(30, 50, 49);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(30, 50, 49, 1) 0%,
|
||||
rgba(20, 120, 99, 1) 100%
|
||||
);
|
||||
min-height: 480px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue