refactor: 抽离登录校验查询

src/composables/query/index.ts

@@ -1,4 +1,5 @@
 export * from './use-line-alarms-query';
 export * from './use-line-devices-query';
 export * from './use-line-stations-query';
+export * from './use-verify-user-query';
 export * from './use-version-check-query';

src/composables/query/use-verify-user-query.ts

@@ -0,0 +1,28 @@
+import { verifyApi } from '@/apis';
+import { VERIFY_USER_QUERY_KEY } from '@/constants';
+import { useSettingStore } from '@/stores';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { storeToRefs } from 'pinia';
+import { computed, watch } from 'vue';
+
+export const useVerifyUserQuery = () => {
+  const queryClient = useQueryClient();
+  const settingStore = useSettingStore();
+  const { offlineDev } = storeToRefs(settingStore);
+
+  watch(offlineDev, (offline) => {
+    if (offline) {
+      queryClient.cancelQueries({ queryKey: [VERIFY_USER_QUERY_KEY] });
+    }
+  });
+
+  return useQuery({
+    queryKey: [VERIFY_USER_QUERY_KEY],
+    enabled: computed(() => !offlineDev.value),
+    refetchInterval: 10 * 1000,
+    queryFn: async ({ signal }) => {
+      await verifyApi({ signal });
+      return null;
+    },
+  });
+};

src/composables/query/use-version-check-query.ts

@@ -1,39 +1,24 @@
-import { verifyApi, type VersionInfo } from '@/apis';
+import { type VersionInfo } from '@/apis';
 import { VERSION_CHECK_QUERY_KEY } from '@/constants';
-import { useSettingStore, useUserStore } from '@/stores';
-import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { useQuery } from '@tanstack/vue-query';
 import axios from 'axios';
 import { useThemeVars } from 'naive-ui';
-import { storeToRefs } from 'pinia';
-import { computed, h, ref, watch } from 'vue';
+import { h, ref, watch } from 'vue';
 
 export const useVersionCheckQuery = () => {
   const localVersionInfo = ref<VersionInfo>();
   const showDialog = ref<boolean>(false);
   const themeVars = useThemeVars();
-  const queryClient = useQueryClient();
-  const userStore = useUserStore();
-  const { userLoginResult } = storeToRefs(userStore);
-  const settingStore = useSettingStore();
-  const { offlineDev } = storeToRefs(settingStore);
 
   const { data: remoteVersionInfo, dataUpdatedAt } = useQuery({
     queryKey: [VERSION_CHECK_QUERY_KEY],
-    enabled: computed(() => !offlineDev.value),
     refetchInterval: 10 * 1000,
     queryFn: async ({ signal }) => {
-      if (!!userLoginResult.value?.token) await verifyApi({ signal });
       const { data } = await axios.get<VersionInfo>(`/manifest.json?t=${Date.now()}`, { signal });
       return data;
     },
   });
 
-  watch(offlineDev, (offline) => {
-    if (offline) {
-      queryClient.cancelQueries({ queryKey: [VERSION_CHECK_QUERY_KEY] });
-    }
-  });
-
   watch(dataUpdatedAt, () => {
     const newVersionInfo = remoteVersionInfo.value;
     if (!newVersionInfo) return;

src/constants/query.ts

@@ -1,4 +1,5 @@
 export const LINE_ALARMS_QUERY_KEY = 'line-alarms';
 export const LINE_DEVICES_QUERY_KEY = 'line-devices';
 export const LINE_STATIONS_QUERY_KEY = 'line-stations';
+export const VERIFY_USER_QUERY_KEY = 'verify-user';
 export const VERSION_CHECK_QUERY_KEY = 'version-check';

src/layouts/app-layout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SettingsDrawer, SyncCameraResultModal } from '@/components';
-import { useLineStationsQuery, useStompClient } from '@/composables';
+import { useLineStationsQuery, useStompClient, useVerifyUserQuery } from '@/composables';
 import { useAlarmStore, useSettingStore, useUserStore } from '@/stores';
 import { parseErrorFeedback } from '@/utils';
 import { useIsFetching, useIsMutating, useMutation } from '@tanstack/vue-query';
@@ -40,6 +40,7 @@ const { menuCollpased, offlineDev } = storeToRefs(settingStore);
 
 const { syncCameraResult, afterCheckSyncCameraResult } = useStompClient();
 
+useVerifyUserQuery();
 useLineStationsQuery();
 
 // 带key的query和mutation用于全局轮询 可用于渲染loading状态