Update routes to pass in JWT token or redirect to login (#53)

LabConnect-RCOS · Oct 26, 2024 · d1ce41a · d1ce41a
2 parents 063f595 + ba8634f
commit d1ce41a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 20 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -29,29 +29,28 @@ function App() {
         <main className=" container-xl ">
           <Routes>
             <Route path="/" element={<Home />} />
+            <Route path="/health" element={<p>App is Healthy</p>} />
             <Route path="/token" element={<Token />} />
-            <Route path="/jobs" element={<Jobs />} />
+            <Route path="/signin" element={<LoginRedirection />} />
+            <Route path="/login" element={<LoginRedirection />} />
+            <Route path="/signout" element={<LogoutRedirection authenticated={authenticated} />} />
+            <Route path="/logout" element={<LogoutRedirection authenticated={authenticated} />} />
 
+            <Route path="/jobs" element={<Jobs />} />
             <Route path="/profile" element={<ProfilePage />} />
             <Route
               path="/staff/department/:department"
-              element={<Department />}
+              element={<Department authenticated={authenticated} />}
             />
-            <Route path="/staff" element={<Departments />} />
-            <Route path="/staff/:staffId" element={<StaffPage />} />
+            <Route path="/staff" element={<Departments authenticated={authenticated} />} />
+            <Route path="/staff/:staffId" element={<StaffPage authenticated={authenticated} />} />
             <Route path="/createPost" element={<CreatePost edit={false} />} />
             <Route
               path="/editPost/:postID"
               element={<CreatePost edit={true} />}
             />
             <Route path="/post/:postID" element={<IndividualPost />} />
 
-            <Route path="/signin" element={<LoginRedirection />} />
-            <Route path="/login" element={<LoginRedirection />} />
-            <Route path="/signout" element={<LogoutRedirection />} />
-            <Route path="/logout" element={<LogoutRedirection />} />
-
-            <Route path="/health" element={<p>App is Healthy</p>} />
             <Route path="/*" element={<PageNotFound />} />
           </Routes>
         </main>

diff --git a/src/auth/Logout.tsx b/src/auth/Logout.tsx
@@ -1,14 +1,14 @@
 import { useEffect } from "react";
 
-const logout = async () => {
+const logout = async (token: string) => {
     try {
         const response = await fetch(
             `${process.env.REACT_APP_BACKEND_SERVER}/logout`,
             {
                 method: "GET",
                 credentials: "include", // to send cookies or session data
                 headers: {
-                    Authorization: `Bearer ${localStorage.getItem("jwt")}`,
+                    Authorization: `Bearer ${token}`,
                 },
             }
         );
@@ -33,10 +33,13 @@ const logout = async () => {
     }
 };
 
-const LogoutRedirection = () => {
+const LogoutRedirection = (authenticated) => {
+    if (!authenticated.authenticated[1]) {
+        window.location.href = "/";
+    }
     console.log("Logging out...");
     useEffect(() => {
-        logout();
+        logout(authenticated.authenticated[0]);
     }, []); // Run only on component mount
 
     return null; // Since this component doesn't need to render anything

diff --git a/src/staff/pages/Department.tsx b/src/staff/pages/Department.tsx
@@ -4,13 +4,21 @@ import Breadcrumb from "../../shared/components/UIElements/Breadcrumb.tsx";
 import DepartmentHeading from "../components/DepartmentHeading.tsx";
 import DepartmentStaff from "../components/DepartmentStaff.tsx";
 
-const Department = () => {
+const Department = (authenticated) => {
+  if (!authenticated.authenticated[1]) {
+    window.location.href = "/login";
+  }
+
   const { department } = useParams();
   const [departmentstate, setDepartmentstate] = useState<false | "not found" | { name: string; description: string; image: string; staff: { id: string; name: string; role: string; image: string; }[] }>(false);
 
   const fetchDepartment = async () => {
     const response = await fetch(
-      `${process.env.REACT_APP_BACKEND_SERVER}/departments/${department}`
+      `${process.env.REACT_APP_BACKEND_SERVER}/departments/${department}`, {
+      headers: {
+        Authorization: `Bearer ${authenticated.authenticated[0]}`,
+      },
+    }
     );
 
     if (!response.ok) {

diff --git a/src/staff/pages/Departments.tsx b/src/staff/pages/Departments.tsx
@@ -2,15 +2,23 @@ import React, { useEffect, useState } from "react";
 import DepartmentItems from "../components/DepartmentItems.tsx";
 import ErrorComponent from "../../shared/components/UIElements/Error.tsx";
 
-const Departments = () => {
+const Departments = (authenticated) => {
+  if (!authenticated.authenticated[1]) {
+    window.location.href = "/login";
+  }
+
   const [departments, setDepartments] = useState<
     { id: string; department_id: string; title: string; image: string }[] | string | null
   >(null);
 
   const fetchDepartments = async () => {
     try {
       const response = await fetch(
-        `${process.env.REACT_APP_BACKEND_SERVER}/departments`
+        `${process.env.REACT_APP_BACKEND_SERVER}/departments`, {
+        headers: {
+          Authorization: `Bearer ${authenticated.authenticated[0]}`,
+        },
+      }
       );
 
       if (!response.ok) {

diff --git a/src/staff/pages/Staff.tsx b/src/staff/pages/Staff.tsx
@@ -4,7 +4,11 @@ import ProfileDescription from "../components/ProfileDescription.tsx";
 import ProfileOpportunities from "../components/ProfileOpportunities.tsx";
 import { useParams } from "react-router";
 
-const StaffPage = () => {
+const StaffPage = (authenticated) => {
+  if (!authenticated.authenticated[1]) {
+    window.location.href = "/login";
+  }
+
   const { staffId } = useParams();
   const [profile, setProfile] = useState<{ name?: string; image?: string; department?: string; description?: string; website?: string } | "not found" | null>(null);
 
@@ -14,7 +18,11 @@ const StaffPage = () => {
 
   const fetchProfile = async () => {
     const response = await fetch(
-      `${process.env.REACT_APP_BACKEND_SERVER}/staff/${staffId}`
+      `${process.env.REACT_APP_BACKEND_SERVER}/staff/${staffId}`, {
+      headers: {
+        Authorization: `Bearer ${authenticated.authenticated[0]}`,
+      },
+    }
     );
 
     if (!response.ok) {