diff --git a/src/components/login-logs/LoginLogsList.vue b/src/components/login-logs/LoginLogsList.vue index e795599d..c2a81b01 100644 --- a/src/components/login-logs/LoginLogsList.vue +++ b/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({ queryKey: ['loginLogs', params], queryFn: fetchLoginLogsList, diff --git a/src/components/member-management/MemberManagementList.vue b/src/components/member-management/MemberManagementList.vue index 5a625600..c828b06d 100644 --- a/src/components/member-management/MemberManagementList.vue +++ b/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({ queryKey: ['member', params], queryFn: fetchMemberList, diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue index be47173e..22a3f067 100644 --- a/src/components/my-request/MyRequestFilterBar.vue +++ b/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, diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue index eb8b3032..4f8fba0c 100644 --- a/src/components/my-request/MyRequestList.vue +++ b/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({ queryKey: ['myRequest', params], queryFn: fetchMyRequestList, diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue index aba9560d..8ebaf24e 100644 --- a/src/components/my-task/MyTaskFilterBar.vue +++ b/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, diff --git a/src/components/my-task/MyTaskList.vue b/src/components/my-task/MyTaskList.vue index fc9c45eb..c8c52ded 100644 --- a/src/components/my-task/MyTaskList.vue +++ b/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({ queryKey: ['myTask', params], queryFn: fetchMyTaskList, diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue index 7ead99e5..e7a2813c 100644 --- a/src/components/request-history/RequestHistoryFilterBar.vue +++ b/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, diff --git a/src/components/request-history/RequestHistoryList.vue b/src/components/request-history/RequestHistoryList.vue index e10d0b1e..b1052542 100644 --- a/src/components/request-history/RequestHistoryList.vue +++ b/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({ queryKey: ['requestHistory', params], queryFn: fetchRequestHistoryList, diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue index 07b22d35..d85868ef 100644 --- a/src/components/requested/RequestedFilterBar.vue +++ b/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, diff --git a/src/components/requested/RequestedList.vue b/src/components/requested/RequestedList.vue index 1c52172d..fb3724ad 100644 --- a/src/components/requested/RequestedList.vue +++ b/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({ queryKey: ['requested', params], queryFn: fetchRequestedList, diff --git a/src/components/statistics/StatisticsCard.vue b/src/components/statistics/StatisticsCard.vue index 3fd49fc9..d83cd7f4 100644 --- a/src/components/statistics/StatisticsCard.vue +++ b/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({ queryKey: computed(() => [statisticsType, periodType]), queryFn: fetchStatistics, diff --git a/src/components/statistics/StatisticsCategoryCard.vue b/src/components/statistics/StatisticsCategoryCard.vue index c6ea1bce..7aa46b88 100644 --- a/src/components/statistics/StatisticsCategoryCard.vue +++ b/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('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({ queryKey: computed(() => ['REQUEST_BY_CATEGORY', periodType]), queryFn: fetchMainStatistics, diff --git a/src/components/task-board/TaskBoard.vue b/src/components/task-board/TaskBoard.vue index 587f8444..326146bf 100644 --- a/src/components/task-board/TaskBoard.vue +++ b/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({ queryKey: ['taskBoard', params], queryFn: fetchTaskBoard, diff --git a/src/components/task-board/TaskBoardFilterBar.vue b/src/components/task-board/TaskBoardFilterBar.vue index b0b34dba..4b3b5979 100644 --- a/src/components/task-board/TaskBoardFilterBar.vue +++ b/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, diff --git a/src/components/task-management/CategoryManagement.vue b/src/components/task-management/CategoryManagement.vue index 7d2bfa5c..936db2f9 100644 --- a/src/components/task-management/CategoryManagement.vue +++ b/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, diff --git a/src/components/team-board/TeamBoard.vue b/src/components/team-board/TeamBoard.vue index 1795e718..12b2b155 100644 --- a/src/components/team-board/TeamBoard.vue +++ b/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({ queryKey: ['teamStatus', params], queryFn: fetchTeamStatus, diff --git a/src/components/team-board/TeamBoardFilterBar.vue b/src/components/team-board/TeamBoardFilterBar.vue index de52abb0..5011517e 100644 --- a/src/components/team-board/TeamBoardFilterBar.vue +++ b/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, diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue index ce9b5532..14e19132 100644 --- a/src/components/top-bar/TopBar.vue +++ b/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] diff --git a/src/stores/member.ts b/src/stores/member.ts index 6a1803ba..98fc3992 100644 --- a/src/stores/member.ts +++ b/src/stores/member.ts @@ -23,7 +23,7 @@ export const useMemberStore = defineStore('memberInfo', () => { } const info = ref(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) diff --git a/src/utils/axios.ts b/src/utils/axios.ts index da4ffb87..1d62479e 100644 --- a/src/utils/axios.ts +++ b/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) => {