Files
ColaFlow-Web/stores/authStore.ts
Yaojia Wang d9228057bb fix(frontend): Fix auth hydration and auto-redirect to login
Fix issue where unauthenticated users were not automatically
redirected to the login page.

Root Cause:
- authStore.ts: isLoading was not set to false after hydration
- AuthGuard.tsx: Used isLoading instead of isHydrated for checks

Changes:
- Set isLoading = false in authStore onRehydrateStorage callback
- Changed AuthGuard to use isHydrated instead of isLoading
- Added console log for redirect debugging

This ensures:
- Hydration completes with correct loading state
- Unauthenticated users are immediately redirected to /login
- More explicit state management with isHydrated

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 21:12:15 +01:00

71 lines
2.2 KiB
TypeScript

import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { User } from '@/types/user';
interface AuthState {
user: User | null;
isAuthenticated: boolean;
isLoading: boolean;
isHydrated: boolean;
setUser: (user: User) => void;
clearUser: () => void;
setLoading: (loading: boolean) => void;
}
export const useAuthStore = create<AuthState>()(
persist(
(set) => ({
user: null,
isAuthenticated: false,
isLoading: true,
isHydrated: false,
setUser: (user) =>
set({ user, isAuthenticated: true, isLoading: false }),
clearUser: () =>
set({ user: null, isAuthenticated: false, isLoading: false }),
setLoading: (loading) => set({ isLoading: loading }),
}),
{
name: 'colaflow-auth',
partialize: (state) => ({
user: state.user,
isAuthenticated: state.isAuthenticated,
}),
// 数据迁移函数:将旧格式的 userId 转换为新格式的 id
migrate: (persistedState: any, version: number) => {
console.log('[AuthStore] Migrating persisted state', { version, persistedState });
// 如果存在旧的 userId 字段,迁移到 id
if (persistedState?.user?.userId && !persistedState?.user?.id) {
console.log('[AuthStore] Migrating userId to id');
persistedState.user.id = persistedState.user.userId;
delete persistedState.user.userId;
}
return persistedState;
},
onRehydrateStorage: () => (state) => {
console.log('[AuthStore] Hydration started');
if (state) {
// 额外的安全检查:确保 user 对象有 id 字段
if (state.user && (state.user as any).userId && !state.user.id) {
console.log('[AuthStore] Post-hydration migration: userId -> id');
state.user.id = (state.user as any).userId;
delete (state.user as any).userId;
}
state.isHydrated = true;
state.isLoading = false; // 水合完成后停止 loading
console.log('[AuthStore] Hydration completed', {
userId: state.user?.id,
isAuthenticated: state.isAuthenticated,
isLoading: state.isLoading
});
}
},
}
)
);