Prevented unauthorized login

src/pages/MainPage/Main.tsx

@@ -1,5 +1,5 @@
 import './Main.sass'
-import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column } from '../../components/'
+import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column, Clickable } from '../../components/'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
@@ -8,6 +8,7 @@ import dayjs from 'dayjs'
 import { checkConnection, createPdf } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName } from '../../stores/employee'
+import { useNavigate } from '@solidjs/router'
 // @ts-ignore
 // import * as openssl from 'openssl-nodejs'
 
@@ -16,6 +17,8 @@ const PESO = import.meta.env.VITE_PESO
 const ID = import.meta.env.VITE_HEADID
 
 export default () => {
+  const navigate = useNavigate()
+
   const [totalOp, setTotalOp] = createSignal(0)
   const [assessor, setAssessor] = createSignal('')
   const [dateOp, setDateOp] = createSignal('')
@@ -40,6 +43,9 @@ export default () => {
   const [approved, setApproved] = createSignal(false)
   const [approvedApplication, setApprovedApplication] = createSignal('')
 
+  const [employeeId, setEmployeeId] = createSignal(0)
+  const [employeeName, setEmployeeName] = createSignal('')
+
   const getListForApproval = async () => {
     try {
       const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
@@ -168,8 +174,36 @@ export default () => {
     createPdf()
   }
 
+  const removeEmployee = () => {
+    sessionStorage.removeItem('id')
+    sessionStorage.removeItem('name')
+  }
+
+  const checkLogged = async () => {
+    const idStore = sessionStorage.getItem('id')
+    const nameStore = sessionStorage.getItem('name')
+    setEmployeeId(parseInt(idStore!))
+    setEmployeeName(nameStore!)
+
+    if (employeeId() === 0 || employeeId().toString() === 'NaN') {
+      removeEmployee()
+      navigate('/', { replace: true })
+      return false
+    }
+    return true
+  }
+
+  const logout = async () => {
+    removeEmployee()
+    navigate('/')
+  }
+
   onMount(async () => {
-    await load()
+    const logged = await checkLogged()
+
+    if (logged) {
+      await load()
+    }
   })
 
   return (
@@ -185,13 +219,13 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">{_employeeName.get()}</span>
-              <Link to="/">
+              <span class="name">{employeeName()}</span>
+              <Clickable onClick={logout}>
                 <Row gap={0.5}>
                   <FiLogOut size={25} />
                   <span>Logout</span>
                 </Row>
-              </Link>
+              </Clickable>
             </Row>
           </Row>
           <Row content="center">