feat(auth): implement user data fetching with react-query and refactor auth store

src/pages/auth/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-api-query';

src/pages/auth/hooks/use-api-query.ts

@@ -0,0 +1,55 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { queryLogin } from '@/modules/query';
+import { toast } from 'sonner';
+import type { UserInfo } from '../store';
+
+export const authQueryKeys = {
+  me: ['auth', 'me'] as const,
+  token: ['auth', 'token'] as const,
+} as const;
+
+export const useMe = () => {
+  return useQuery({
+    queryKey: authQueryKeys.me,
+    queryFn: async () => {
+      const res = await queryLogin.getMe();
+      if (res.code === 200) {
+        return res.data;
+      }
+      throw new Error(res.message || 'Failed to fetch user info');
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+};
+
+export const useSwitchOrg = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (username?: string) => {
+      const res = await queryLogin.switchUser(username || '');
+      if (res.code === 200) {
+        return res.data;
+      }
+      throw new Error(res.message || 'Switch failed');
+    },
+    onSuccess: () => {
+      toast.success('切换成功');
+      queryClient.invalidateQueries({ queryKey: authQueryKeys.me });
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    },
+    onError: (error) => {
+      toast.error(error.message || '请求失败');
+    },
+  });
+};
+
+export const useGetToken = () => {
+  return useQuery({
+    queryKey: authQueryKeys.token,
+    queryFn: () => queryLogin.getToken(),
+    staleTime: Infinity,
+  });
+};

src/pages/auth/index.tsx

@@ -5,6 +5,7 @@ import { LogIn, LockKeyhole } from "lucide-react"
 export { BaseHeader } from './modules/BaseHeader'
 import { useMemo } from 'react';
 import { useLocation, useNavigate } from '@tanstack/react-router';
+import { useMe } from "./hooks"
 
 
 type Props = {
@@ -26,6 +27,8 @@ export const AuthProvider = ({ children, mustLogin }: Props) => {
     return store.openLinkList.some(item => location.pathname.startsWith(item))
   }, [location.pathname])
   const loginUrl = '/root/login/?redirect=' + encodeURIComponent(window.location.href);
+  const me = useMe()
+  console.log('me', me, me.error);
   if (mustLogin && !store.me && !isOpen) {
     return (
       <div className="w-full h-full min-h-screen flex items-center justify-center bg-background">

src/pages/auth/store.ts

@@ -1,8 +1,9 @@
 
-import { queryLogin } from '@/modules/query';
+import { queryLogin, stackQueryClient } from '@/modules/query';
 import { create } from 'zustand';
 import { toast } from 'sonner';
-type UserInfo = {
+import { authQueryKeys } from './hooks';
+export type UserInfo = {
   id?: string;
   username?: string;
   nickname?: string | null;
@@ -58,16 +59,23 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
     set({ me: undefined, isAdmin: false });
   },
   getMe: async () => {
+    const data = await stackQueryClient.fetchQuery({
+      queryKey: authQueryKeys.me,
+      queryFn: async () => {
         const res = await queryLogin.getMe();
         if (res.code === 200) {
-      set({ me: res.data });
-      set({ isAdmin: res.data.orgs?.includes?.('admin') || false });
+          return res.data;
         }
+        throw new Error(res.message || 'Failed to fetch user info');
+      },
+    });
+    set({ me: data, isAdmin: data?.orgs?.includes?.('admin') || false });
   },
   switchOrg: async (username?: string) => {
     const res = await queryLogin.switchUser(username || '');
     if (res.code === 200) {
       toast.success('切换成功');
+      stackQueryClient.invalidateQueries({ queryKey: authQueryKeys.me });
       setTimeout(() => {
         window.location.reload();
       }, 1000);
@@ -80,16 +88,20 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
   init: async () => {
     const token = await queryLogin.getToken();
     if (token) {
-      set({ me: {} })
-      const me = await queryLogin.getMe();
-      // const user = await queryLogin.checkLocalUser() as UserInfo;
-      const user = me.code === 200 ? me.data : undefined;
-      if (user) {
-        set({ me: user });
-        set({ isAdmin: user.orgs?.includes?.('admin') || false });
+      set({ me: {} });
+      try {
+        const data = await stackQueryClient.fetchQuery({
+          queryKey: authQueryKeys.me,
+        }) as UserInfo;
+        console.log('Fetched user info:', data);
+        if (data) {
+          set({ me: data, isAdmin: data.orgs?.includes?.('admin') || false });
         } else {
           set({ me: undefined, isAdmin: false });
         }
+      } catch {
+        set({ me: undefined, isAdmin: false });
+      }
     }
   },
   openLinkList: ['/login'],