Merge pull request #140 from JNU-econovation/feat/133/add-token-to-he…

…ader feat: add token to header
JNU-econovation · Jul 23, 2024 · c698f03 · c698f03
2 parents dfee98c + d7629ad
commit c698f03
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 49 deletions.
diff --git a/FE/error/src/components/DeleteEvent.jsx b/FE/error/src/components/DeleteEvent.jsx
@@ -7,9 +7,15 @@ const DeleteEvent = ({
   onRequestClose,
   handleUpdateDeleteData,
 }) => {
+  const storedToken = localStorage.getItem("slackToken");
+
   const calendarDelete = () => {
     axios
-      .delete("/api/calendar/" + selectID)
+      .delete(`/api/calendar/${selectID}`, {
+        headers: {
+          Authorization: `Bearer ${storedToken}`,
+        },
+      })
       .then(() => {
         handleUpdateDeleteData(selectID);
         handleDelete();

diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx
@@ -14,11 +14,9 @@ const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => {
   const [checkModalIsOpen, setCheckModalIsOpen] = useState(false);
   const [createModalIsOpen, setCreateModalIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState("");
-  const [token, setToken] = useState(null);
 
   useEffect(() => {
     const storedToken = localStorage.getItem("slackToken");
-    setToken(storedToken);
 
     const isUserLoggedIn = !!storedToken;
     setIsLoggedIn(isUserLoggedIn);
@@ -89,16 +87,16 @@ const EconoCalendar = ({ isLoggedIn, setIsLoggedIn }) => {
       localStorage.removeItem("slackToken");
       setIsLoggedIn(false);
       setToken(null);
-      // } else {
-      //   const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성
-      //   localStorage.setItem("slackToken", newToken);
-      //   setToken(newToken);
-      //   setIsLoggedIn(true);
-      // }
-      //TODO: 추후 아래 코드로 변경
     } else {
-      window.location.href = "/login";
+      const newToken = "dummyToken" + Math.random().toString(36).substr(2, 9); // 임의의 토큰 생성
+      localStorage.setItem("slackToken", newToken);
+      setToken(newToken);
+      setIsLoggedIn(true);
     }
+    //TODO: 추후 아래 코드로 변경
+    // } else {
+    //   window.location.href = "/login";
+    // }
   };
 
   return (

diff --git a/FE/error/src/components/scheduleCheck/CheckCalendar.jsx b/FE/error/src/components/scheduleCheck/CheckCalendar.jsx
@@ -21,6 +21,7 @@ const CheckCalendar = ({
   handleUpdateDeleteData,
 }) => {
   const [event, setEvent] = useState({});
+  const storedToken = localStorage.getItem("slackToken");
 
   function createDate(title, startDate, endDate, place, info, type, color) {
     const specificEvent = {
@@ -42,17 +43,21 @@ const CheckCalendar = ({
       return;
     }
 
-    axios.get("/api/calendar/" + selectID).then((res) => {
-      createDate(
-        res.data.data.eventName,
-        res.data.data.eventStartDate,
-        res.data.data.eventEndDate,
-        res.data.data.eventPlace,
-        res.data.data.eventInfo,
-        res.data.data.eventType,
-        res.data.data.filterColor
-      );
-    });
+    axios
+      .get("/api/calendar/" + selectID, {
+        headers: { Authorization: `Bearer ${storedToken}` },
+      })
+      .then((res) => {
+        createDate(
+          res.data.data.eventName,
+          res.data.data.eventStartDate,
+          res.data.data.eventEndDate,
+          res.data.data.eventPlace,
+          res.data.data.eventInfo,
+          res.data.data.eventType,
+          res.data.data.filterColor
+        );
+      });
   }, [selectID]);
 
   function date(startDate, endDate) {

diff --git a/FE/error/src/components/scheduleCreate/CreateModal.jsx b/FE/error/src/components/scheduleCreate/CreateModal.jsx
@@ -29,6 +29,7 @@ const CreateModal = ({
   const [eventEndTime, setEventEndTime] = useState("00:00");
   const [selectedFilter, setSelectedFilter] = useState(null);
   const [activeDropdown, setActiveDropdown] = useState(null);
+  const storedToken = localStorage.getItem("slackToken");
 
   useEffect(() => {
     if (isOpen && selectedDate) {
@@ -160,15 +161,23 @@ const CreateModal = ({
       },
     };
 
-    axios.post("/api/calendar", data).then((res) => {
-      createDate(
-        eventName,
-        res.data.data.eventId,
-        eventStartDate,
-        eventEndDate
-      );
-      onRequestClose();
-    });
+    axios
+      .post(
+        "/api/calendar",
+        {
+          headers: { Authorization: `Bearer ${storedToken}` },
+        },
+        data
+      )
+      .then((res) => {
+        createDate(
+          eventName,
+          res.data.data.eventId,
+          eventStartDate,
+          eventEndDate
+        );
+        onRequestClose();
+      });
   };
 
   return (

diff --git a/FE/error/src/pages/CalendarModify.jsx b/FE/error/src/pages/CalendarModify.jsx
@@ -10,6 +10,7 @@ const CalendarModify = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const selectID = location.state.selectID;
+  const storedToken = localStorage.getItem("slackToken");
 
   const [modifyName, setModifyName] = useState("");
   const [modifyStartDate, setModifyStartDate] = useState("");
@@ -75,7 +76,13 @@ const CalendarModify = () => {
       eventPlace: modifyPlace,
     };
     axios
-      .put("/api/calendar/" + selectID, eventData)
+      .put(
+        "/api/calendar/" + selectID,
+        {
+          headers: { Authorization: `Bearer ${storedToken}` },
+        },
+        eventData
+      )
       .then((res) => {
         goBack();
       })

diff --git a/FE/error/src/pages/MainPage.jsx b/FE/error/src/pages/MainPage.jsx
@@ -11,7 +11,6 @@ const MainPage = () => {
   const [filterIndividualLists, setFilterIndividualLists] = useState([]);
   const [filterGroupLists, setFilterGroupLists] = useState([]);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-
   useEffect(() => {
     const token = localStorage.getItem("slackToken");
     setIsLoggedIn(!!token);
@@ -29,11 +28,15 @@ const MainPage = () => {
       filterIndividualLists.filter((filter) => filter.filterId !== newFilter)
     );
   };
+  const storedToken = localStorage.getItem("slackToken");
 
   useEffect(() => {
     axios
-      .get("/api/filter")
+      .get("/api/filter", {
+        headers: { Authorization: `Bearer ${storedToken}` },
+      })
       .then((res) => {
+        console.log(res);
         const fetchedFilter = res.data.data.map((filter) => ({
           filterId: filter.filterId,
           filterName: filter.filterName,

diff --git a/FE/error/src/pages/ProfilePage.jsx b/FE/error/src/pages/ProfilePage.jsx
@@ -7,11 +7,14 @@ const ProfilePage = () => {
   const [selectedImage, setSelectedImage] = useState(null);
   const [images, setImages] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const storedToken = localStorage.getItem("slackToken");
 
   useEffect(() => {
     const fetchImages = async () => {
       try {
-        const response = await axios.get("http://localhost:8080/api/images");
+        const response = await axios.get("http://localhost:8080/api/images", {
+          headers: { Authorization: `Bearer ${storedToken}` },
+        });
         setImages(response.data);
         setIsLoading(false);
       } catch (error) {

diff --git a/FE/error/src/utils/filterUtils/FilterCreateModal.jsx b/FE/error/src/utils/filterUtils/FilterCreateModal.jsx
@@ -15,7 +15,7 @@ const FilterCreateModal = ({
 }) => {
   const [filterTitle, setFilterTitle] = useState("");
   const [filterColor, setFilterColor] = useState("");
-
+  const storedToken = localStorage.getItem("slackToken");
   const handleTitleChange = (event) => {
     setFilterTitle(event.target.value);
   };
@@ -24,12 +24,17 @@ const FilterCreateModal = ({
       filterName: filterTitle,
       filterColor: filterColor,
     };
-    axios.post("/api/filter", newFilter).then((res) => {
-      addNewFilter(newFilter);
-      setFilterTitle("");
-      setFilterColor("");
-      onRequestClose();
-    });
+    axios
+      .post("/api/filter", newFilter, {
+        headers: { Authorization: `Bearer ${storedToken}` },
+      })
+      .then((res) => {
+        console.log(res);
+        addNewFilter(newFilter);
+        setFilterTitle("");
+        setFilterColor("");
+        onRequestClose();
+      });
   };
 
   return (

diff --git a/FE/error/src/utils/filterUtils/FilterDelete.jsx b/FE/error/src/utils/filterUtils/FilterDelete.jsx
@@ -3,10 +3,16 @@ import styled from "styled-components";
 import axios from "axios";
 
 const FilterDelete = ({ filterID, updateDeleteFilter }) => {
+  const storedToken = localStorage.getItem("slackToken");
+
   const handleDelete = () => {
-    axios.delete("/api/filter/" + filterID).then(() => {
-      updateDeleteFilter(filterID);
-    });
+    axios
+      .delete("/api/filter/" + filterID, {
+        headers: { Authorization: `Bearer ${storedToken}` },
+      })
+      .then(() => {
+        updateDeleteFilter(filterID);
+      });
   };
   return (
     <>

diff --git a/FE/error/src/utils/filterUtils/FilterModify.jsx b/FE/error/src/utils/filterUtils/FilterModify.jsx
@@ -16,6 +16,7 @@ const FilterModify = ({ filterName, filterID }) => {
     setClickPosition({ x: rect.left, y: rect.top });
     setShowModal(true);
   };
+  const storedToken = localStorage.getItem("slackToken");
 
   const handleTitleChange = (event) => {
     setFilterTitle(event.target.value);
@@ -26,10 +27,18 @@ const FilterModify = ({ filterName, filterID }) => {
       filterName: filterTitle,
       filterColor: filterColor,
     };
-    axios.post("/api/calendar/filter/" + filterID, modifyFilter).then((res) => {
-      setShowModal(false);
-      window.location.reload();
-    });
+    axios
+      .post(
+        "/api/calendar/filter/" + filterID,
+        {
+          headers: { Authorization: `Bearer ${storedToken}` },
+        },
+        modifyFilter
+      )
+      .then((res) => {
+        setShowModal(false);
+        window.location.reload();
+      });
   };
 
   const customStyles = {