Merge branch 'issue-45-route-protection' into 'main'

route protetion, not found page

See merge request !28

src/components/header.vue

@@ -108,6 +108,7 @@ export default {
       // console.log(b)
       localStorage.removeItem("token");
       console.log('token removed')
+      window.location.reload()
     },
     getProfile(){
       HTTP.get("users/profile").then((res)=>{

src/router/index.js

@@ -16,20 +16,23 @@ import KpiIndex from "../views/KpiIndex.vue";
 import KpiDetail from "../views/KpiDetail.vue";
 import KpiCreate from "../views/KpiCreate.vue";
 import KpiManagerDetail from "../views/KpiManagerDetail.vue";
-import Test from "../views/Test.vue";
+import NotFound from "../views/NotFound.vue";
 import ManagerKpiIndex from "../views/ManagerKpiIndex.vue";
 import ManagerKaryawanIndex from "../views/ManagerKaryawanIndex.vue";
 import ManagerKaryawanDetail from "../views/ManagerKaryawanDetail.vue";
 import ResponseIndex from "../views/ResponseIndex.vue";
 import ResponseDetail from "../views/ResponseDetail.vue";
 import ResponseEmployee from "../views/ResponseEmployee.vue";
+import { HTTP } from '../http-common'
+
+const adminRoute = ['Login', 'profil-admin', 'change-pass', 'User', 'Admin', 'KaryawanInsert', 'Departemen', 'KaryawanEdit', 'KaryawanDetail', 'AdminInsert', 'AdminEdit']
+const empRoute = ['Login', 'profil-user', 'change-pass', 'kpiIndex', 'KpiDetail', 'KpiResponses', 'ResponseEmployee', 'KpiCreate', 'KpiManagerDetail', 'ManagerkpiIndex', 'ManagerkaryawanIndex', 'ManagerKaryawanDetail', 'ResponseIndex', 'ResponseDetail']
 
 const routes = [
-  // {
-  //   path: "/",
-  //   name: "Home",
-  //   component: Login,
-  // },
+  {
+    path: "/",
+    redirect: "/login"
+  },
   {
     path: "/login",
     name: "Login",
@@ -148,9 +151,9 @@ const routes = [
     component: ResponseDetail
   },
   {
-    path: "/test",
-    name: "test",
-    component: Test,
+    path: "/:catchAll(.*)",
+    name: "NotFound",
+    component: NotFound,
   },
 ];
 
@@ -159,4 +162,40 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach((to,from, next)=>{
+  if (to.name != "Login" && to.name != "NotFound"){
+    HTTP.get("users/profile").then((res)=>{
+      let isAdmin = res.data.data.is_admin
+      if (isAdmin){
+        if (adminRoute.includes(to.name)){
+          next()
+        }else{
+          next("/forbidden")
+        }
+      }else{
+        if (empRoute.includes(to.name)){
+          next()
+        }else{
+          next("/forbidden")
+        }
+      }
+    }).catch(()=>{
+      next("/login")
+    })
+  }else if (to.name != "NotFound"){
+    HTTP.get("users/profile").then((res)=>{
+      if (res.data.data.is_admin){
+        next("/user")
+      }else{
+        next("/kpi")
+      }
+    }).catch(()=>{
+      next()
+    })
+  }else{
+    next()
+  }
+  
+})
+
 export default router;

src/views/Login.vue

@@ -110,7 +110,7 @@ export default {
         .then((response) => {
           localStorage.setItem("token", response.data.token)
           if (response.data.success) {
-            this.$router.push({ name: "User" });
+            window.location.reload()
           }
         })
         .catch(() => alert("username atau password salah"));

src/views/NotFound.vue

+<template>
+    <div class="d-flex align-items-center justify-content-center" style="height:100vh;">
+        <div class="align-self-center justify-content-center">
+        <h1 class="text-center" style="
+              font-size: 100px;" >404</h1>
+        <h3 class="text-center" style="
+              font-size: 50px;" >Not Found</h3>
+              <div
+          id="logo"
+          class="d-flex flex-row justify-content-start align-items-center illustration"
+        >
+          <i class="icon ion-ios-navigate" style="font-size: 73px"></i>
+          <p
+            class="text-center"
+            style="
+              font-size: 40px;
+              padding: 0;
+              width: 115px;
+              margin-top: 16px;
+              margin-left: 2px;
+              font-family: nunito;
+              font-weight: bold;
+            "
+          >
+            simkpi
+          </p>
+        </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    name: "NotFound",
+    components: {
+    }, 
+}
+</script>
+
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+    background-color: #fff;
+}
+
+.illustration {
+  text-align: center;
+  padding: 0 0 20 20px;
+  font-size: 100px;
+  color: rgb(244, 71, 107);
+}
+
+#logo {
+  margin-left: 30px;
+}
+
+
+</style>
\ No newline at end of file

src/views/Test.vue

-<template>
-    <div class="container-fluid">
-            <div class="row flex-nowrap">
-                <Sidebar current_page = "About"></Sidebar>
-                <div class="col ps-md-2 pt-2">
-                    <Header></Header>
-                        <input v-model="filter" type="text">
-                        <Table2 :endpoint="'kpis'" :columns="columns" :filter="filter" :filter_column="'name'" @edit-entry="print" @delete-entry="print" @detail-entry="print" ></Table2>
-                </div>
-            </div>
-    </div>
-</template>
-
-<script>
-
-import Header from "../components/header"
-import Sidebar from "../components/sidebar"
-import Table2 from "../components/table-2";
-
-
-export default {
-    name: "Template",
-    components: {
-        Header,
-        Sidebar,
-        Table2
-    }, 
-    data(){
-        return{
-            filter: "",
-            columns: {
-                Id: {
-                name : "Id",
-                data : "id",
-                hidden : true,
-                clickable : false
-                },
-                Nama: {
-                name : "Nama",
-                data : "name",
-                hidden : false,
-                clickable : true
-                },
-            },
-        }
-    },
-    methods: {
-        print(id){
-            console.log(id)
-        }
-    }
-}
-</script>
-
-<style scoped>
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    min-height: 100vh;
-    background-color: #fff;
-}
-
-
-</style>
\ No newline at end of file