Files
ele-HeiXiu/src/pages/login/hooks/use-auth-state.ts
YoungestSongMo 7982b69219 refactor: CSS 拆分 + auth 持久化提取 + 目录整理
- globals.css 拆分为 4 文件:tokens.css(颜色)/ transitions.css(过渡)/ base.css(重置)/ globals.css(入口)
- 提取 auth-persistence.ts 到 services/,解除 AppProvider→pages/login/hooks 反向依赖
- use-auth-state.ts 精简为纯 React Hook,持久化逻辑委托给 services/auth-persistence.ts
- components/common/ → components/ui/(目录名语义更清晰)
- TypeScript + Vite 构建通过

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-09 14:20:07 +08:00

74 lines
2.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// ============================================================
// useAuthState — 记住账号 / 自动登录 表单状态 Hook
//
// "记住密码":下次打开页面自动回填用户名(不再存储密码)
// "自动登录"登录成功时标记AppProvider 启动时用 refresh_token 静默续期
//
// 持久化逻辑已提取到 services/auth-persistence.ts
// 此处仅负责 React 组件状态useState + useCallback
//
// 安全:
// - 密码从不持久化存储access_token / refresh_token 由 safeStorage 加密保护)
// - 安全性由 refresh_token + access_token 的 JWT 双重机制 + OS 密钥链保障
// ============================================================
import { useState, useCallback } from 'react';
import {
saveAuth,
clearSavedAuth,
getSavedUsername,
getSavedRemember,
getSavedAutoLogin,
} from '@/services/auth-persistence';
export { getAutoLoginFlag, clearAutoLoginFlag, clearSavedAuth } from '@/services/auth-persistence';
// ---------- Hook ----------
export function useAuthState() {
const [username, setUsername] = useState(getSavedUsername);
const [remember, setRemember] = useState(getSavedRemember);
const [autoLogin, setAutoLogin] = useState(getSavedAutoLogin);
const handleRememberChange = useCallback((checked: boolean) => {
setRemember(checked);
if (!checked) {
setAutoLogin(false);
clearSavedAuth();
}
}, []);
const handleAutoLoginChange = useCallback((checked: boolean) => {
setAutoLogin(checked);
}, []);
/**
* 登录成功后调用。
* 参数由调用方LoginPage直接从表单值传入避免 useCallback 的 stale closure。
*
* @param user - 用户名
* @param _password - 明文密码(不再持久化存储,保留参数以兼容调用方)
* @param doRemember - 是否勾选"记住用户名"
* @param doAutoLogin - 是否勾选"自动登录"
*/
const handleSaveAuth = useCallback(
(user: string, _password: string, doRemember: boolean, doAutoLogin: boolean) => {
setUsername(user);
if (doRemember || doAutoLogin) {
saveAuth(user, doRemember, doAutoLogin);
}
},
[],
);
return {
username,
remember,
autoLogin,
setUsername,
handleRememberChange,
handleAutoLoginChange,
saveAuth: handleSaveAuth,
};
}