เพิ่มเช็คสังกัด ถ้าไม่มีสังกัดจะแสดงหน้า no-position

This commit is contained in:
Warunee Tamkoo 2026-05-01 12:50:50 +07:00
parent c4e246ed74
commit 6c819a6097
5 changed files with 259 additions and 2 deletions

View file

@ -5,6 +5,7 @@ import MainView from '@/views/MainView.vue'
const loginView = () => import('@/views/login.vue')
const resetPasswordView = () => import('@/views/ResetPassword.vue')
const noPositionView = () => import('@/views/NoPositionView.vue')
import { authenticated, logout } from '@/plugins/auth'
@ -87,19 +88,63 @@ const router = createRouter({
Auth: false,
},
},
{
path: '/no-position',
name: 'no-position',
component: noPositionView,
meta: {
Auth: false,
},
},
],
})
// authen with keycloak client
router.beforeEach(async (to, from, next) => {
// ตรวจสอบเส้นทางพิเศษที่ไม่ต้องตรวจสอบสิทธิ์
const publicPaths = ['/login', '/auth', '/reset-password', '/no-position']
if (publicPaths.includes(to.path)) {
next()
return
}
// ตรวจสอบการ authenticate
if (to.meta.Auth) {
const checkAuthen = await authenticated()
if (!checkAuthen && to.meta.Auth) {
logout()
return
}
} else {
next()
}
// ตรวจสอบว่าผู้ใช้มีข้อมูลสังกัดหรือไม่
// ต้องทำการ dynamic import เนื่องจากเป็นการใช้งาน Pinia store ใน router
if (to.path !== '/no-position') {
try {
const { usePositionKeycloakStore } = await import('@/stores/positionKeycloak')
const positionKeycloakStore = usePositionKeycloakStore()
const dataPositionKeycloak = positionKeycloakStore.dataPositionKeycloak
// ถ้ามีข้อมูล positionKeycloak แล้ว ให้ตรวจสอบว่ามี organization หรือไม่
if (dataPositionKeycloak) {
const hasOrganization =
dataPositionKeycloak.organization &&
(dataPositionKeycloak.organization.root ||
dataPositionKeycloak.organization.child1 ||
dataPositionKeycloak.organization.child2 ||
dataPositionKeycloak.organization.child3 ||
dataPositionKeycloak.organization.child4)
if (!hasOrganization) {
next('/no-position')
return
}
}
} catch (error) {
console.error('Error checking position:', error)
}
}
next()
})

View file

@ -182,6 +182,22 @@ async function fetchKeycloakPosition() {
if (existingData) {
//
// (organization)
const hasOrganization =
existingData.organization &&
(existingData.organization.root ||
existingData.organization.child1 ||
existingData.organization.child2 ||
existingData.organization.child3 ||
existingData.organization.child4)
if (!hasOrganization) {
// redirect NoPosition
router.replace('/no-position')
return
}
privacyStore.modalPrivacy = !existingData.privacyCheckin
privacyStore.setAccepted(existingData.privacyCheckin)
@ -208,6 +224,24 @@ async function fetchKeycloakPosition() {
},
}
// (organization)
// redirect NoPosition
const hasOrganization =
keycloakData.organization &&
(keycloakData.organization.root ||
keycloakData.organization.child1 ||
keycloakData.organization.child2 ||
keycloakData.organization.child3 ||
keycloakData.organization.child4)
if (!hasOrganization) {
// ()
positionKeycloakStore.setPositionKeycloak(keycloakData)
// Redirect NoPosition
router.replace('/no-position')
return
}
positionKeycloakStore.setPositionKeycloak(keycloakData)
privacyStore.modalPrivacy = !keycloakData.privacyCheckin
privacyStore.setAccepted(keycloakData.privacyCheckin)

View file

@ -0,0 +1,106 @@
<script setup lang="ts">
import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'
import { useCounterMixin } from '@/stores/mixin'
import { usePositionKeycloakStore } from '@/stores/positionKeycloak'
import { logout } from '@/plugins/auth'
import CustomComponent from '@/components/CustomDialog.vue'
const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const positionKeycloakStore = usePositionKeycloakStore()
const { showLoader, hideLoader } = mixin
/**
* งกนจดการเมอผใชกดปมตกลง
* ดำเนนการ logout โดยตรง
*/
function handleOkClick() {
performLogout()
}
/**
* งกนดำเนนการออกจากระบบ
*/
async function performLogout() {
showLoader()
try {
// positionKeycloak logout
positionKeycloakStore.clearPositionKeycloak()
await logout()
} catch (error) {
console.error('Logout error:', error)
} finally {
setTimeout(() => {
hideLoader()
}, 1000)
}
}
</script>
<template>
<div
class="fullscreen bg-secondary text-white text-center q-pa-sm flex flex-center"
>
<div class="no-position-container">
<!-- Icon แสดงความผดปกต -->
<div class="icon-container">
<q-icon name="mdi-account-off-outline" size="100px" color="white" />
</div>
<!-- วขอหล -->
<div class="text-h4 q-mt-lg q-mb-md">ไมพบขอมลสงก</div>
<!-- รายละเอยด -->
<div class="text-h6 q-mb-lg text-weight-regular">
านยงไมงกดในโครงสรางองคกร<br />
กรณาตดตอเจาหนาทเบอร 1171
<br />เพอดำเนนการเพมขอม
</div>
<div class="text-weight-regular">
เมอเจาหนาทไดเพมทานในโครงสรางองคกรเรยบรอยแล
กรณาเขาสระบบใหมกคร
</div>
<!-- มตกลง -->
<q-btn
class="q-mt-xl"
color="white"
text-color="secondary"
unelevated
label="ตกลง"
no-caps
size="lg"
padding="md xl"
@click="handleOkClick"
/>
</div>
</div>
</template>
<style lang="scss" scoped>
.no-position-container {
max-width: 600px;
padding: 2rem;
}
.icon-container {
opacity: 0.9;
}
.text-h4 {
font-weight: 700;
}
.text-h6 {
line-height: 1.8;
opacity: 0.95;
}
.q-btn {
border-radius: 8px;
font-weight: 600;
min-width: 150px;
}
</style>