From c8c2ba10cb9d3ea43503d4ecbe3c6119ed9bea07 Mon Sep 17 00:00:00 2001 From: minjeongHEO <96780693+minjeongHEO@users.noreply.github.com> Date: Thu, 30 May 2024 22:15:06 +0900 Subject: [PATCH] authoriztion (#86) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * WIP: 깃허브 로그인 중 * WIP: 깃허브 로그인 * feat: 로컬 스토리지 토큰 읽어오기 * feat: authorization 추가 --- FE/src/api/fetchFilterData.js | 27 +++++++++++++++++++++++---- FE/src/api/fetchIssueData.js | 22 +++++++++++++++++++++- FE/src/api/fetchLabelData.js | 8 +++++++- FE/src/router/ProtectedRoute.jsx | 3 ++- FE/src/utils/userUtils.js | 15 +++++++++------ 5 files changed, 62 insertions(+), 13 deletions(-) diff --git a/FE/src/api/fetchFilterData.js b/FE/src/api/fetchFilterData.js index 48be0fdd0..b443142d1 100644 --- a/FE/src/api/fetchFilterData.js +++ b/FE/src/api/fetchFilterData.js @@ -1,3 +1,5 @@ +import { getAccessToken } from '../utils/userUtils'; + const LABELS_API_URI = '/api/labels'; const MEMBERS_API_URI = '/api/members'; const MILESTONES_API_URI = '/api/milestones?isClosed='; @@ -10,7 +12,11 @@ const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); */ export const fetchLabelsData = async () => { try { - const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${LABELS_API_URI}`); + const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${LABELS_API_URI}`, { + headers: { + Authorization: `Bearer ${getAccessToken()}`, + }, + }); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (response.status === 200) { @@ -26,7 +32,11 @@ export const fetchLabelsData = async () => { */ export const fetchMembersData = async () => { try { - const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${MEMBERS_API_URI}`); + const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${MEMBERS_API_URI}`, { + headers: { + Authorization: `Bearer ${getAccessToken()}`, + }, + }); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (response.status === 200) { @@ -46,7 +56,11 @@ export const fetchMilestonesData = async (isClosed) => { try { // await delay(5000); - const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${MILESTONES_API_URI}${isClosed}`); + const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${MILESTONES_API_URI}${isClosed}`, { + headers: { + Authorization: `Bearer ${getAccessToken()}`, + }, + }); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (response.status === 200) { @@ -78,7 +92,12 @@ export const fetchIssueListData = async (isClosedParam, authorIdParam, assigneeI const response = await fetch( `${ import.meta.env.VITE_TEAM_SERVER - }${ISSUE_LIST_API_URI}?isClosed=${isClosed}&authorId=${authorId}&assigneeId=${assigneeId}&labelName=${labelName}&milestoneName=${milestoneNameParam}&noValues=${noValues}` + }${ISSUE_LIST_API_URI}?isClosed=${isClosed}&authorId=${authorId}&assigneeId=${assigneeId}&labelName=${labelName}&milestoneName=${milestoneNameParam}&noValues=${noValues}`, + { + headers: { + Authorization: `Bearer ${getAccessToken()}`, + }, + } ); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); diff --git a/FE/src/api/fetchIssueData.js b/FE/src/api/fetchIssueData.js index b6d27b357..f43bbdc83 100644 --- a/FE/src/api/fetchIssueData.js +++ b/FE/src/api/fetchIssueData.js @@ -1,3 +1,5 @@ +import { getAccessToken } from '../utils/userUtils'; + const ISSUE_DEFAULT_API_URI = '/api/issues'; const ISSUE_COMMENTS_DEFAULT_API_URI = '/api/comments'; const ISSUE_DEFAULT_FILE_URI = '/api/files'; @@ -12,7 +14,11 @@ export const fetchIssueDetailData = async (issueId) => { try { // await delay(2000); - const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${ISSUE_DEFAULT_API_URI}/${issueId}`); + const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${ISSUE_DEFAULT_API_URI}/${issueId}`, { + headers: { + Authorization: `Bearer ${getAccessToken()}`, + }, + }); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (response.status === 200) { @@ -34,6 +40,7 @@ export const fetchIssueStateToggle = async (toIssueState, issueIds) => { method: 'POST', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ issueIds }), }); @@ -64,6 +71,7 @@ export const fetchDeleteIssue = async (issueId) => { method: 'DELETE', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, }); @@ -94,6 +102,7 @@ export const fetchModifyIssueTitle = async (title, issueId) => { method: 'PATCH', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ title }), }); @@ -125,6 +134,7 @@ export const fetchModifyIssueContent = async (content, fileId, issueId) => { method: 'PATCH', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ content, fileId }), }); @@ -156,6 +166,7 @@ export const fetchModifyIssueComment = async (content, fileId, commentId) => { method: 'PUT', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ content, fileId }), }); @@ -188,6 +199,7 @@ export const fetchCreateIssueComment = async (writerId, content, issueId, fileId method: 'POST', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ writerId, content, issueId, fileId }), }); @@ -218,6 +230,7 @@ export const fetchDeleteComment = async (commentId) => { method: 'DELETE', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, }); @@ -248,6 +261,7 @@ export const fetchModifyIssueLabels = async (issueId, labelIds) => { method: 'PATCH', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ labelIds }), }); @@ -279,6 +293,7 @@ export const fetchModifyIssueAssignees = async (issueId, assigneeIds) => { method: 'PATCH', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ assigneeIds }), }); @@ -310,6 +325,7 @@ export const fetchModifyIssueMilestone = async (issueId, milestoneId) => { method: 'PATCH', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ milestoneId }), }); @@ -339,6 +355,9 @@ export const fetchUploadFile = async (formData) => { try { const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${ISSUE_DEFAULT_FILE_URI}`, { method: 'POST', + headers: { + Authorization: `Bearer ${getAccessToken()}`, + }, body: formData, }); @@ -373,6 +392,7 @@ export const fetchCreateNewIssue = async (title, content, authorId, milestoneId, method: 'POST', headers: { 'Content-Type': 'application/json', + 'Authorization': `Bearer ${getAccessToken()}`, }, body: JSON.stringify({ title, content, authorId, milestoneId, fileId, labelIds, assigneeIds }), }); diff --git a/FE/src/api/fetchLabelData.js b/FE/src/api/fetchLabelData.js index 4463c841c..0bb5dae08 100644 --- a/FE/src/api/fetchLabelData.js +++ b/FE/src/api/fetchLabelData.js @@ -1,3 +1,5 @@ +import { getAccessToken } from '../utils/userUtils'; + const LABEL_DEFAULT_API_URI = '/api/labels'; const HOME_DEFAULT_API_URI = '/api/home/components'; @@ -12,7 +14,11 @@ const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); export const fetchLabelMilestoneCountData = async () => { try { // await delay(2000); - const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${HOME_DEFAULT_API_URI}`); + const response = await fetch(`${import.meta.env.VITE_TEAM_SERVER}${HOME_DEFAULT_API_URI}`, { + headers: { + Authorization: `Bearer ${getAccessToken()}`, + }, + }); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (response.status === 200 || response.status === 201) { diff --git a/FE/src/router/ProtectedRoute.jsx b/FE/src/router/ProtectedRoute.jsx index 11ca1ef5e..b6da832ef 100644 --- a/FE/src/router/ProtectedRoute.jsx +++ b/FE/src/router/ProtectedRoute.jsx @@ -1,9 +1,10 @@ import React from 'react'; import { Navigate } from 'react-router-dom'; +import { getAccessToken } from '../utils/userUtils'; export default function ProtectedRoute({ children }) { //TODO: 토큰을 기반으로 로그인 상태 확인 - const isUserAuthenticated = localStorage.getItem('storeUserData'); + const isUserAuthenticated = getAccessToken(); if (!isUserAuthenticated) return ; diff --git a/FE/src/utils/userUtils.js b/FE/src/utils/userUtils.js index 5d3f84ea6..b4326f352 100644 --- a/FE/src/utils/userUtils.js +++ b/FE/src/utils/userUtils.js @@ -1,6 +1,9 @@ -export const getUserId = () => { - return localStorage.getItem('storeUserData') ? JSON.parse(localStorage.getItem('storeUserData')).memberProfile.id : ''; -}; -export const getUserImg = () => { - return localStorage.getItem('storeUserData') ? JSON.parse(localStorage.getItem('storeUserData')).memberProfile.imgUrl : ''; -}; +export const getUserId = () => (localStorage.getItem('storeUserData') ? JSON.parse(localStorage.getItem('storeUserData')).memberProfile.id : ''); + +export const getUserImg = () => (localStorage.getItem('storeUserData') ? JSON.parse(localStorage.getItem('storeUserData')).memberProfile.imgUrl : ''); + +export const getAccessToken = () => + localStorage.getItem('storeUserData') ? JSON.parse(localStorage.getItem('storeUserData')).tokenResponse.accessToken : ''; + +export const getRefreshToken = () => + localStorage.getItem('storeUserData') ? JSON.parse(localStorage.getItem('storeUserData')).tokenResponse.refreshToken : '';