fix(accessToken): remove unnecessary token verification logic

Author: gracefulBrown

frontend/src/apis/comment.ts

@@ -2,6 +2,7 @@ import { createAxiosInstance } from '../utils/axiosInstance';
 import { CommentListResponse, CommentRequest } from '../models/Comment';
 
 const instanceWithoutToken = createAxiosInstance();
+const instanceWithToken = (accessToken) => createAxiosInstance({ accessToken });
 
 export const getComments = async (studylogId: number): Promise<CommentListResponse> => {
   const response = await instanceWithoutToken.get(`/studylogs/${studylogId}/comments`);
@@ -12,25 +13,31 @@ export const getComments = async (studylogId: number): Promise<CommentListRespon
 export const createCommentRequest = ({
   studylogId,
   body,
+  accessToken,
 }: {
   studylogId: number;
   body: CommentRequest;
-}) => instanceWithoutToken.post(`/studylogs/${studylogId}/comments`, body);
+  accessToken: string;
+}) => instanceWithToken(accessToken).post(`/studylogs/${studylogId}/comments`, body);
 
 export const editComment = ({
   studylogId,
   commentId,
   body,
+  accessToken,
 }: {
   studylogId: number;
   commentId: number;
   body: CommentRequest;
-}) => instanceWithoutToken.put(`/studylogs/${studylogId}/comments/${commentId}`, body);
+  accessToken: string;
+}) => instanceWithToken(accessToken).put(`/studylogs/${studylogId}/comments/${commentId}`, body);
 
 export const deleteComment = ({
   studylogId,
   commentId,
+  accessToken,
 }: {
   studylogId: number;
   commentId: number;
-}) => instanceWithoutToken.delete(`/studylogs/${studylogId}/comments/${commentId}`);
+  accessToken: string;
+}) => instanceWithToken(accessToken).delete(`/studylogs/${studylogId}/comments/${commentId}`);

frontend/src/contexts/UserProvider.js

@@ -57,6 +57,7 @@ const UserProvider = ({ children }) => {
       client.defaults.headers['Authorization'] = `Bearer ${accessToken}`;
       setState((prev) => ({ ...prev, accessToken }));
     },
+    onLogout
   });
 
   function onLogout() {

frontend/src/hooks/queries/comment.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { createCommentRequest, deleteComment, editComment, getComments } from '../../apis/comment';
 import { CommentRequest } from '../../models/Comment';
+import LOCAL_STORAGE_KEY from "../../constants/localStorage";
 
 const QUERY_KEY = {
   comments: 'comments',
@@ -12,7 +13,11 @@ export const useFetchComments = (studylogId: number) =>
 export const useCreateComment = (studylogId: number) => {
   const queryClient = useQueryClient();
 
-  return useMutation((body: CommentRequest) => createCommentRequest({ studylogId, body }), {
+  return useMutation((body: CommentRequest) => createCommentRequest({
+    studylogId,
+    body,
+    accessToken: localStorage.getItem(LOCAL_STORAGE_KEY.ACCESS_TOKEN) as string
+  }), {
     onSuccess() {
       queryClient.invalidateQueries([QUERY_KEY.comments, studylogId]);
     },
@@ -24,7 +29,7 @@ export const useEditCommentMutation = (studylogId: number) => {
 
   return useMutation(
     ({ commentId, body }: { commentId: number; body: CommentRequest }) =>
-      editComment({ studylogId, commentId, body }),
+      editComment({ studylogId, commentId, body, accessToken: localStorage.getItem(LOCAL_STORAGE_KEY.ACCESS_TOKEN) as string }),
     {
       onSuccess() {
         queryClient.invalidateQueries([QUERY_KEY.comments, studylogId]);
@@ -36,7 +41,7 @@ export const useEditCommentMutation = (studylogId: number) => {
 export const useDeleteCommentMutation = (studylogId: number) => {
   const queryClient = useQueryClient();
 
-  return useMutation((commentId: number) => deleteComment({ studylogId, commentId }), {
+  return useMutation((commentId: number) => deleteComment({ studylogId, commentId, accessToken: localStorage.getItem(LOCAL_STORAGE_KEY.ACCESS_TOKEN) as string }), {
     onSuccess() {
       queryClient.invalidateQueries([QUERY_KEY.comments, studylogId]);
     },

frontend/src/hooks/queries/studylog.ts

@@ -34,13 +34,16 @@ export const useGetRecentStudylogsQuery = () => {
   const { accessToken } = user;
 
   return useQuery<Studylog[]>([QUERY_KEY.recentStudylogs], async () => {
-    const response = await requestGetStudylogs({
-      query: { type: 'searchParams', data: 'size=3' },
-      accessToken,
-    });
-    const { data } = await response.data;
-
-    return data;
+    try {
+      const response = await requestGetStudylogs({
+        query: {type: 'searchParams', data: 'size=3'},
+        accessToken,
+      });
+      const {data} = await response.data;
+      return data;
+    } catch (error) {
+      alert(ERROR_MESSAGE.DEFAULT);
+    }
   });
 };
 

frontend/src/hooks/useFilterWithParams.ts

@@ -18,8 +18,8 @@ const useFilterWithParams = () => {
     ...memberFilter,
   ]);
 
-  const [postQueryParams, setPostQueryParams] = useState({
-    page: query.page ? query.page : 1,
+  const [postQueryParams, setPostQueryParams] = useState<{ page?: number }>({
+    page: query.page ? Number(query.page) : 1,
   });
 
   const onSetPage = (page) => {

frontend/src/hooks/useRequest.js

@@ -20,6 +20,16 @@ const useRequest = (defaultValue, callback, onSuccess, onError, onFinish) => {
       setResponse(responseData);
       onSuccess?.(responseData);
     } catch (error) {
+
+      if (!response.isLoggedIn) {
+        setError(ERROR_CODE.EXPIRED_ACCESS_TOKEN);
+        onError?.({
+          code: ERROR_CODE.EXPIRED_ACCESS_TOKEN,
+          message: ERROR_MESSAGE[ERROR_CODE.EXPIRED_ACCESS_TOKEN],
+        });
+        return;
+      }
+
       if (error instanceof TypeError) {
         setError(ERROR_CODE.SERVER_ERROR);
         onError?.({

frontend/src/index.tsx

@@ -11,11 +11,11 @@ import GlobalStyles from './GlobalStyles';
 
 const queryClient = new QueryClient();
 
-if (process.env.NODE_ENV === 'development') {
-  const { worker } = require('./mocks/browser');
-
-  worker.start();
-}
+// if (process.env.NODE_ENV === 'development') {
+//   const { worker } = require('./mocks/browser');
+//
+//   worker.start();
+// }
 
 ReactDOM.render(
   <React.StrictMode>