CLAP-311 RefreshToken 로직 구현

src/components/login-logs/LoginLogsList.vue

@@ -33,6 +33,7 @@ import { computed } from 'vue'
 import type { LoginLogsResponse } from '@/types/admin'
 import NoContent from '../lists/NoContent.vue'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useLogsParamsStore()
 const onPageChange = (value: number) => {
@@ -49,7 +50,8 @@ const fetchLoginLogsList = async () => {
   return response.data
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<LoginLogsResponse>({
   queryKey: ['loginLogs', params],
   queryFn: fetchLoginLogsList,

src/components/member-management/MemberManagementList.vue

@@ -33,6 +33,7 @@ import NoContent from '../lists/NoContent.vue'
 import MemberManagementListBar from './MemberManagementListBar.vue'
 import MemberManagementListCard from './MemberManagementListCard.vue'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useMemberManagementParamsStore()
 const onPageChange = (value: number) => {
@@ -43,7 +44,8 @@ const fetchMemberList = async () => {
   return response.data
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<MemberManagementResponse>({
   queryKey: ['member', params],
   queryFn: fetchMemberList,

src/components/my-request/MyRequestFilterBar.vue

@@ -43,13 +43,15 @@ import FilterInput from '../filters/FilterInput.vue'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { getCategory } from '@/api/common'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,

src/components/my-request/MyRequestList.vue

@@ -34,6 +34,7 @@ import NoContent from '../lists/NoContent.vue'
 import MyRequestListBar from './MyRequestListBar.vue'
 import MyRequestListCard from './MyRequestListCard.vue'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -47,7 +48,8 @@ const fetchMyRequestList = async () => {
   return response.data
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<MyRequestResponse>({
   queryKey: ['myRequest', params],
   queryFn: fetchMyRequestList,

src/components/my-task/MyTaskFilterBar.vue

@@ -43,13 +43,15 @@ import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
 import { getCategory } from '@/api/common'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,

src/components/my-task/MyTaskList.vue

@@ -34,6 +34,7 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 import NoContent from '../lists/NoContent.vue'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -47,7 +48,8 @@ const fetchMyTaskList = async () => {
   return response.data
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<MyTaskResponse>({
   queryKey: ['myTask', params],
   queryFn: fetchMyTaskList,

src/components/request-history/RequestHistoryFilterBar.vue

@@ -43,13 +43,15 @@ import FilterInput from '../filters/FilterInput.vue'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { getCategory } from '@/api/common'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,

src/components/request-history/RequestHistoryList.vue

@@ -34,6 +34,7 @@ import { computed } from 'vue'
 import type { RequestHistoryResponse } from '@/types/manager'
 import NoContent from '../lists/NoContent.vue'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -47,7 +48,8 @@ const fetchRequestHistoryList = async () => {
   return response.data
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<RequestHistoryResponse>({
   queryKey: ['requestHistory', params],
   queryFn: fetchRequestHistoryList,

src/components/requested/RequestedFilterBar.vue

@@ -37,13 +37,15 @@ import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
 import { getCategory } from '@/api/common'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const store = useRequestParamsStore()
 store.$reset()
 
 const onParamsChange = useRequestParamsChange()
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,

src/components/requested/RequestedList.vue

@@ -34,6 +34,7 @@ import { computed } from 'vue'
 import type { RequestedResponse } from '@/types/manager'
 import NoContent from '../lists/NoContent.vue'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useRequestParamsStore()
 const onPageChange = (value: number) => {
@@ -47,7 +48,8 @@ const fetchRequestedList = async () => {
   return response.data
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<RequestedResponse>({
   queryKey: ['requested', params],
   queryFn: fetchRequestedList,

src/components/statistics/StatisticsCard.vue

@@ -36,6 +36,7 @@ import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import type { StatisticsData } from '@/types/admin'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { title, statisticsType, chartType } = defineProps<{
   title: string
@@ -65,7 +66,8 @@ const fetchStatistics = async () => {
   return response.data
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<StatisticsData[]>({
   queryKey: computed(() => [statisticsType, periodType]),
   queryFn: fetchStatistics,

src/components/statistics/StatisticsCategoryCard.vue

@@ -38,6 +38,7 @@ import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import type { StatisticsData } from '@/types/admin'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const periodType = ref<PeriodType>('DAY')
 const changePeriod = (newPeriodType: PeriodType) => {
@@ -57,7 +58,8 @@ const fetchMainStatistics = async () => {
 
   return response.data
 }
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data: mainData } = useQuery<StatisticsData[]>({
   queryKey: computed(() => ['REQUEST_BY_CATEGORY', periodType]),
   queryFn: fetchMainStatistics,

src/components/task-board/TaskBoard.vue

@@ -108,6 +108,7 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import type { Status } from '@/types/common'
 import { computed } from 'vue'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const queryClient = useQueryClient()
 
@@ -166,7 +167,8 @@ const fetchTaskBoard = async () => {
   const response = await axiosInstance.get('/api/task-board', { params: parsedParams })
   return response.data
 }
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<TaskCardList>({
   queryKey: ['taskBoard', params],
   queryFn: fetchTaskBoard,

src/components/task-board/TaskBoardFilterBar.vue

@@ -32,6 +32,7 @@ import { computed } from 'vue'
 import type { LabelDataTypes } from '@/types/common'
 import { getCategory, getLabels } from '@/api/common'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useTaskBoardParamsStore()
 
@@ -56,7 +57,8 @@ const onTitleChange = (value: string) => {
   params.title = value
 }
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data: categoryList } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,

src/components/task-management/CategoryManagement.vue

@@ -37,10 +37,12 @@ import CategoryLine from './CategoryLine.vue'
 import CategoryLineSub from './CategoryLineSub.vue'
 import { getCategory } from '@/api/common'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const router = useRouter()
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,

src/components/team-board/TeamBoard.vue

@@ -26,6 +26,7 @@ import type { TeamBoardResponse } from '@/types/manager'
 import { computed } from 'vue'
 import NoContent from '../lists/NoContent.vue'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useTeamBoardParamsStore()
 
@@ -35,7 +36,8 @@ const fetchTeamStatus = async () => {
   const response = await axiosInstance.get('/api/team-status/filter', { params: parsedParams })
   return response.data
 }
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery<TeamBoardResponse>({
   queryKey: ['teamStatus', params],
   queryFn: fetchTeamStatus,

src/components/team-board/TeamBoardFilterBar.vue

@@ -30,12 +30,14 @@ import FilterInput from '../filters/FilterInput.vue'
 import { useTeamBoardParamsChange } from '../hooks/useTeamBoardParamsChange'
 import { getCategory } from '@/api/common'
 import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
 
 const { params } = useTeamBoardParamsStore()
 
 const onParamsChange = useTeamBoardParamsChange()
 
-const { isLogined } = useMemberStore()
+const memberStore = useMemberStore()
+const { isLogined } = storeToRefs(memberStore)
 const { data } = useQuery({
   queryKey: ['category'],
   queryFn: getCategory,

src/components/top-bar/TopBar.vue

@@ -71,9 +71,10 @@ const { isLogined, info } = storeToRefs(memberStore)
 const route = useRoute()
 const router = useRouter()
 onMounted(async () => {
+  await memberStore.updateMemberInfoWithToken()
+
   if (isLogined.value) {
     await fetchNotificationCount()
-    await memberStore.updateMemberInfoWithToken()
   }
 
   const originUrl = route.path.split('/')[1]

src/stores/member.ts

@@ -23,7 +23,7 @@ export const useMemberStore = defineStore('memberInfo', () => {
   }
 
   const info = ref<User>(INITIAL_INFO)
-  const isLogined = ref(!!Cookies.get('refreshToken'))
+  const isLogined = ref(false)
   const router = useRouter()
 
   async function updateMemberInfoWithToken() {
@@ -34,7 +34,7 @@ export const useMemberStore = defineStore('memberInfo', () => {
     try {
       const { data }: { data: User } = await axiosInstance.get('/api/members/info')
       info.value = data
-      isLogined.value = Cookies.get('refreshToken') ? true : false
+      isLogined.value = true
       return data.role
     } catch (e) {
       console.log(e)

src/utils/axios.ts

@@ -15,15 +15,13 @@ const getNewAccessToken = async () => {
       }
     )
     Cookies.set('accessToken', response.data.accessToken)
-    Cookies.set('refreshToken', response.data.newRefreshToken)
+    Cookies.set('refreshToken', response.data.refreshToken)
 
     return response.data.accessToken
-  } catch (e) {
-    console.log(e)
-    // console.error('토큰 발행 실패', e)
-    // Cookies.remove('accessToken')
-    // Cookies.remove('refreshToken')
-    // window.location.href = 'login'
+  } catch {
+    Cookies.remove('accessToken')
+    Cookies.remove('refreshToken')
+    window.location.href = 'login'
   }
 }
 const setInterceptors = (instance: AxiosInstance) => {