Merge pull request #17 from nhattpn/nhat

update token and logout
nhattpn · Apr 28, 2024 · fc4357f · fc4357f
2 parents c41968c + 8e22bd7
commit fc4357f
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 64 deletions.
diff --git a/login-frontend/src/App.js b/login-frontend/src/App.js
@@ -11,27 +11,32 @@ import Course1 from './pages/coursePage/Course1';
 import CourseRegistration from './pages/coursePage/CourseRegistration';
 import TeacherDashBoard from './pages/dashboardPage/TeacherDashBoard';
 import AdminDashBoard from './pages/dashboardPage/TeacherDashBoard';
+import { AuthProvider } from './context/authContext';
+import { useRequireAuth } from './hooks/useAuth';
+import PrivateRoute from './components/auth/PrivateRoute';
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path='/' element={<FirstPage />} />
-        <Route path='/teacher/login' element={<AuthPage />} />
-        <Route path='/student/login' element={<AuthPage />} />
-        <Route path='/admin/login' element={<AuthPage />} />
-        <Route path='/teacher/changepassword' element={<AuthPage />} />
-        <Route path='/student/changepassword' element={<AuthPage />} />
-        <Route path='/admin/changepassword' element={<AuthPage />} />
+      <Router>
+        <Routes>
+          <Route path='/' element={<FirstPage />} />
+          <Route path='/teacher/login' element={<AuthPage />} />
+          <Route path='/student/login' element={<AuthPage />} />
+          <Route path='/admin/login' element={<AuthPage />} />
+          <Route path='/teacher/changepassword' element={<AuthPage />} />
+          <Route path='/student/changepassword' element={<AuthPage />} />
+          <Route path='/admin/changepassword' element={<AuthPage />} />
 
-        <Route path='/teacher/dashboard' element={< TeacherDashBoard/>} />
-        <Route path='/student/dashboard' element={< StudentDashBoard/>} />
-        <Route path='/admin/dashboard' element={< AdminDashBoard/>} />
-        <Route path='/course' element={<Course />} />
-        <Route path='/course1' element={<Course1 />} />
-        <Route path='/courseRegistration' element={<CourseRegistration />} />
-      </Routes>
-    </Router>
+          <Route element={< PrivateRoute/>} >
+            <Route path='/teacher/dashboard' element={< TeacherDashBoard/>} />
+            <Route path='/student/dashboard' element={< StudentDashBoard/>} />
+            <Route path='/admin/dashboard' element={< AdminDashBoard/>} />
+            <Route path='/course' element={<Course />} />
+            <Route path='/course1' element={<Course1 />} />
+            <Route path='/courseRegistration' element={<CourseRegistration />} />
+          </Route>
+        </Routes>
+      </Router>
   );
 }
 

diff --git a/login-frontend/src/components/auth/PrivateRoute.js b/login-frontend/src/components/auth/PrivateRoute.js
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { Outlet, Navigate, useNavigate } from 'react-router-dom'
+
+const PrivateRoutes = () => {
+  const navigate = useNavigate();
+  const redirectUrl = '/';
+  const token = sessionStorage.getItem('jwtToken');
+  useEffect(() => {
+    if(!token){
+      navigate(redirectUrl, {replace: true });
+    }
+  }, []);
+  return(
+    <Outlet/>
+  )
+}
+
+export default PrivateRoutes
diff --git a/login-frontend/src/components/auth/login.js b/login-frontend/src/components/auth/login.js
@@ -13,25 +13,25 @@ function Login(props) {
   const handleLogin = async (event) => {
     event.preventDefault();
     try {
-        // Gọi hàm auth.login() và chờ phản hồi
-        const response = await auth.login(email, password);
-        console.log("response data: ", response);
-        if (response.message === "Login successful") {
-          setErrorMsg(null);
-          setSuccessMsg("Login successful!");
-          navigate('/' + path[1] + '/dashboard');
-        } else if(response.message === "Default password in use. Password change required."){
-          setErrorMsg(response.message);
-          setSuccessMsg(null);
-          navigate('/' + path[1] + '/changepassword');
-        } else{
-          setErrorMsg(response.message);
-          setSuccessMsg(null);
-        }
+      // Gọi hàm auth.login() và chờ phản hồi
+      const response = await auth.login(email, password);
+      console.log("response data: ", response);
+      if (response.message === "Login successful") {
+        setErrorMsg(null);
+        setSuccessMsg("Login successful!");
+        navigate('/' + path[1] + '/dashboard');
+      } else if(response.message === "Default password in use. Password change required."){
+        setErrorMsg(response.message);
+        setSuccessMsg(null);
+        navigate('/' + path[1] + '/changepassword');
+      } else{
+        setErrorMsg(response.message);
+        setSuccessMsg(null);
+      }
     } catch (error) {
-        // Xử lý các lỗi xảy ra trong quá trình gọi auth.login()
-        setErrorMsg(error?.message || "Error");
-        console.error('Login error:', error.message);
+      // Xử lý các lỗi xảy ra trong quá trình gọi auth.login()
+      setErrorMsg(error?.message || "Error");
+      console.error('Login error:', error.message);
     }
 };
 

diff --git a/login-frontend/src/components/auth/logout.js b/login-frontend/src/components/auth/logout.js
@@ -0,0 +1,11 @@
+export const LogOut = async () => {
+    try{
+        sessionStorage.removeItem('jwtToken');
+        await fetch('/api/logout', { method: 'POST' });
+        console.log('Logged out successfully (backend)');
+    } catch (error) {
+        console.error('Error logging out (backend):', error);
+    } finally {
+        window.location.href = '/';
+    }
+};
diff --git a/login-frontend/src/context/authContext.js b/login-frontend/src/context/authContext.js
@@ -8,10 +8,11 @@ export function AuthProvider({ children }) {
   const login = async (email, password) => {
     try {
       const data = await authService.login(email, password);
-      if (data && data.token) {
-        sessionStorage.setItem('jwtToken', data.token);
+      console.log(data);
+      if (data) {
+        const token = data.token;
         setUser(data);
-        return data;
+        return {...data, token};
       } else {
         console.error('No data or token received on login');
         return null; 

diff --git a/login-frontend/src/hooks/useAuth.js b/login-frontend/src/hooks/useAuth.js
@@ -1,20 +1,6 @@
 import { useContext } from 'react';
 import { AuthContext } from '../context/authContext';
-import { useEffect, useNavigate } from 'react';
 
 export function useAuth() {
   return useContext(AuthContext);
-}
-export function useRequireAuth(redirectUrl = '/login') {
-  const auth = useAuth();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const token = sessionStorage.getItem('jwtToken');
-    if (!token) {
-      navigate(redirectUrl);
-    }
-  }, [navigate, redirectUrl]);
-
-  return auth;
 }
diff --git a/login-frontend/src/pages/FirstPage.js b/login-frontend/src/pages/FirstPage.js
@@ -5,7 +5,6 @@ import axios from 'axios';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import FirstHeader from './../components/header_footer/FirstHeader';
 import FirstFooter from './../components/header_footer/FirstFooter';
-//import './FirstPage.css';
 
 const slide1 = 'https://i.ibb.co/RbNBFv1/8ktXyJ-n.jpg';
 

diff --git a/login-frontend/src/pages/authPage.js b/login-frontend/src/pages/authPage.js
@@ -46,7 +46,7 @@ function App() {
             style={{ width: '25%', height: '100vh', backgroundColor: 'rgb(62, 161, 168)' }}
           >
             <div>
-              <img className="img-thumbnail no-gutter" id="logo" alt="" src={logo} />
+              <a href='/'><img className="img-thumbnail no-gutter" id="logo" alt="" src={logo} /></a>
               <h1 style={{marginTop: '5vh'}}>Welcome</h1>
               {switchToChangePassword()}
             </div>

diff --git a/login-frontend/src/pages/dashboardPage/AdminDashboard.js b/login-frontend/src/pages/dashboardPage/AdminDashboard.js
@@ -4,7 +4,7 @@ import Training from './../components/DashBoard/studentTraining';
 import Footer from './../components/header_footer/Footer';
 import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
-import './StudentDashboard.css';
+import {LogOut} from './../../components/auth/logout';
 
 function DataTable() {
   const [currentView, setCurrentView] = useState('StudentInfo');
@@ -24,7 +24,7 @@ function DataTable() {
           <li style={{padding: '2vh'}}>
             <a className="nav-link" href="#">Nguyen Van A - SVxxxxx</a>
           </li>
-          <li style={{padding: '2vh'}}>
+          <li style={{padding: '2vh', cursor: 'pointer'}} onClick={LogOut}>
             <i className="fa fa-solid fa-bell fa-lg fa-3x"></i>
             Logout
           </li>

diff --git a/login-frontend/src/pages/dashboardPage/StudentDashboard.js b/login-frontend/src/pages/dashboardPage/StudentDashboard.js
@@ -4,6 +4,7 @@ import Training from '../../components/dashboard/studentTraining';
 import Footer from '../../components/header_footer/Footer';
 import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import {LogOut} from './../../components/auth/logout';
 import './Dashboard.css';
 
 function DataTable() {
@@ -13,7 +14,6 @@ function DataTable() {
     setCurrentView(viewName);
   };
   const [isOpen, setIsOpen] = useState(false);
-
   return (
     <div>
       <nav className="navbar navbar-expand-lg navbar-light bg-light">
@@ -24,7 +24,7 @@ function DataTable() {
           <li style={{padding: '2vh'}}>
             <a className="nav-link" href="#">Nguyen Van A - SVxxxxx</a>
           </li>
-          <li style={{padding: '2vh'}}>
+          <li style={{padding: '2vh', cursor: 'pointer'}} onClick={LogOut}>
             <i className="fa fa-solid fa-bell fa-lg fa-3x"></i>
             Logout
           </li>

diff --git a/login-frontend/src/pages/dashboardPage/TeacherDashBoard.js b/login-frontend/src/pages/dashboardPage/TeacherDashBoard.js
@@ -1,20 +1,19 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import TeacherInfo from './../../components/dashboard/teacherInfo';
 import Footer from '../../components/header_footer/Footer';
 import SubjectSchedule from './../../components/dashboard/subjectSchedule';
 import LessonPlan from './../../components/dashboard/lessonPlan';
 import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
-import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
-// import './StudentDashboard.css';
-
+import {LogOut} from './../../components/auth/logout';
 function DataTable() {
   const [currentView, setCurrentView] = useState('TeacherInfo');
 
   const handleNavigation = (viewName) => {
     setCurrentView(viewName);
   };
-  const [isOpen, setIsOpen] = useState(false);
+
 
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <div>
       <nav className="navbar navbar-expand-lg navbar-light bg-light">
@@ -25,7 +24,7 @@ function DataTable() {
           <li style={{padding: '2vh'}}>
             <a className="nav-link" href="#">Nguyen Van A - GVxxxxx</a>
           </li>
-          <li style={{padding: '2vh'}}>
+          <li style={{padding: '2vh', cursor: 'pointer'}} onClick={LogOut}>
             <i className="fa fa-solid fa-bell fa-lg fa-3x"></i>
             Logout
           </li>