From 0d15d068cdcb1a8f87080eb5f161999551c023d3 Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Mon, 17 Mar 2025 11:20:48 +0100
Subject: [PATCH] feat: logged-in check toegevoegd in de router

---
 frontend/src/components/MenuBar.vue | 22 ++++++++++------------
 frontend/src/router/index.ts        | 20 +++++++++++++++++++-
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index f085f4ed..122d08e2 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -1,26 +1,24 @@
 <script setup lang="ts">
     import { ref } from "vue";
-    import { useRoute } from "vue-router";
-    import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
     import { useI18n } from "vue-i18n";
 
-    const route = useRoute();
+    // Import assets
+    import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
+
     const { t, locale } = useI18n();
 
     // Instantiate variables to use in html to render right
     // Links and content dependent on the role (student or teacher)
-    //TODO: use localStorage to know which one in logged in, teacher or student
-    const isTeacher = route.path.includes("teacher");
+    const path = "/user";
 
-    const userId = route.params.id as string;
-
-    const role = isTeacher ? "teacher" : "student";
+    const role = localStorage.getItem("activeRole");
     const name = "Kurt Cobain";
     const initials = name
         .split(" ")
         .map((n) => n[0])
         .join("");
 
+    // Available languages
     const languages = ref([
         { name: "English", code: "en" },
         { name: "Nederlands", code: "nl" },
@@ -41,7 +39,7 @@
                 <ul>
                     <li>
                         <router-link
-                            :to="`/${role}/${userId}`"
+                            :to="`${path}`"
                             class="dwengo_home"
                         >
                             <img
@@ -55,7 +53,7 @@
                     </li>
                     <li>
                         <router-link
-                            :to="`/${role}/${userId}/assignment`"
+                            :to="`/user/assignment`"
                             class="menu_item"
                         >
                             {{ t("assignments") }}
@@ -63,14 +61,14 @@
                     </li>
                     <li>
                         <router-link
-                            :to="`/${role}/${userId}/class`"
+                            :to="`${path}/class`"
                             class="menu_item"
                             >{{ t("classes") }}</router-link
                         >
                     </li>
                     <li>
                         <router-link
-                            :to="`/${role}/${userId}/discussion`"
+                            :to="`${path}/discussion`"
                             class="menu_item"
                             >{{ t("discussions") }}
                         </router-link>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index e69d9fc0..92c3feab 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -12,6 +12,7 @@ import CallbackPage from "@/views/CallbackPage.vue";
 import UserDiscussions from "@/views/discussions/UserDiscussions.vue";
 import UserClasses from "@/views/classes/UserClasses.vue";
 import UserAssignments from "@/views/classes/UserAssignments.vue";
+import authState from "@/services/auth/auth-service.ts";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -20,15 +21,18 @@ const router = createRouter({
             path: "/",
             name: "home",
             component: () => import("../views/HomePage.vue"),
+            meta: {requiresAuth: false}
         },
         {
             path: "/login",
             name: "LoginPage",
             component: () => import("../views/LoginPage.vue"),
+            meta: {requiresAuth: false},
         },
         {
             path: "/callback",
             component: CallbackPage,
+            meta: {requiresAuth: false}
         },
 
         {
@@ -99,9 +103,23 @@ const router = createRouter({
             path: "/:catchAll(.*)",
             name: "NotFound",
             component: NotFound,
-            meta: {requiresAuth: true},
+            meta: {requiresAuth: false}
         },
     ],
 });
 
+router.beforeEach(async (to, from, next) => {
+
+    // Verify if user is logged in for paths that require access
+    if (to.meta.requiresAuth) {
+        if (!authState.isLoggedIn) {
+            next("/login");
+        } else {
+            next();
+        }
+    } else {
+        next();
+    }
+});
+
 export default router;