feat: logged-in check toegevoegd in de router

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>

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;