check role

src/main.ts

@@ -104,9 +104,4 @@ if (auth.token && auth.refresh_token) {
   // });
 }
 
-app.config.globalProperties.$checkPermission = function () {
-  console.log("This is a checkPermission");
-  return true;
-};
-
 app.mount("#app");

src/plugins/keycloak.ts

@@ -15,7 +15,7 @@ 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 = "/";
+  window.location.href = "/login";
 }
 
 async function kcLogout() {

src/views/login.vue

@@ -6,6 +6,7 @@ import keycloak, { keycloakConfig, kcAuthen } from "@/plugins/keycloak";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import CustomComponent from "@/components/CustomDialog.vue";
 
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -15,6 +16,10 @@ const { showLoader, hideLoader, messageError } = mixin;
 
 const username = ref<string>("");
 const password = ref<string>("");
+const isDisplay = ref<boolean>(true); // check display login page
+/**
+ * @description ฟังก์ชั่นเข้าสู่ระบบ
+ */
 async function onSubmit() {
   showLoader();
   const formdata = new URLSearchParams();
@@ -50,16 +55,38 @@ async function onSubmit() {
 }
 
 onMounted(() => {
+  // check authen keycloak and role of system
   if (keycloak.authenticated) {
-    console.log("authenticated", keycloak.authenticated);
+    isDisplay.value = false;
+    showLoader();
+    if (keycloak.tokenParsed) {
+      const checkRole = (element: string) => element === "STAFF";
 
-    router.push("/");
+      // ถ้าไม่มีสิทธิ์เข้าใช้งานระบบ แสดงข้อความแจ้งเตือน
+      if (keycloak.tokenParsed.role.findIndex(checkRole) === -1) {
+        $q.dialog({
+          component: CustomComponent,
+          componentProps: {
+            title: "พบข้อผิดพลาด",
+            message: "ขออภัยคุณไม่มีสิทธิ์เข้าใช้งานระบบนี้",
+            icon: "warning",
+            color: "red",
+            onlycancel: true,
+          },
+        });
+        hideLoader();
+        isDisplay.value = true;
+      } else {
+        // ถ้ามีสิทธิ์เข้าใช้งานระบบ พาไปหน้าหลัก
+        router.push("/");
+      }
+    }
   }
 });
 </script>
 
 <template>
-  <div class="bg-image">
+  <div v-if="isDisplay" class="bg-image">
     <div class="login-pf-page">
       <div id="kc-logo">
         <div id="myimage"></div>