- 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>
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
// ============================================================
|
||
// 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,
|
||
};
|
||
}
|