如何在React-admin登出后保留本地存储的用户偏好？

1. 自定义偏好存储适配器（官方推荐） #

React-admin支持通过store prop自定义偏好存储实现，你可以重写默认的clear方法，避免清空整个localStorage，只删除React-admin自身的偏好键，同时保留你需要的自定义键。

默认的localStorageStore的clear方法会调用localStorage.clear()，这就是你的自定义数据也被删除的原因。我们可以扩展它，修改清理逻辑：

import { Admin, localStorageStore } from 'react-admin';

// 自定义存储适配器
const persistentLocalStorageStore = {
    // 继承默认存储的所有方法
    ...localStorageStore,
    // 重写clear方法，只清理React-admin相关的键
    clear: () => {
        // 定义需要保留的自定义偏好键
        const keysToPreserve = ['user_preferred_theme', 'default_view_mode'];
        
        Object.keys(localStorage).forEach(key => {
            // 只删除以"ra-"开头的React-admin默认键，且不在保留列表中
            if (key.startsWith('ra-') && !keysToPreserve.includes(key)) {
                localStorage.removeItem(key);
            }
        });
    }
};

// 在Admin组件中使用自定义存储
function App() {
    return (
        <Admin 
            store={persistentLocalStorageStore} 
            authProvider={yourAuthProvider}
        >
            {/* 你的资源配置 */}
        </Admin>
    );
}

这样用户登出时，只有React-admin自身的偏好会被清理，你指定的自定义键会保留在localStorage中。

2. 拦截登出动作，备份并恢复偏好 #

如果不想修改全局存储适配器，也可以在登出前手动备份需要保留的偏好，执行登出后再将其写回存储：

import { useLogout, useStore } from 'react-admin';

// 封装自定义登出hook
function usePersistentLogout() {
    const logout = useLogout();
    const store = useStore();

    const handleLogout = async () => {
        // 备份需要保留的偏好项
        const savedPrefs = {
            theme: store.get('theme'),
            language: store.get('language')
        };

        // 执行默认登出流程
        await logout();

        // 恢复备份的偏好
        if (savedPrefs.theme) store.set('theme', savedPrefs.theme);
        if (savedPrefs.language) store.set('language', savedPrefs.language);
    };

    return handleLogout;
}

// 在你的登出按钮组件中使用
function LogoutButton() {
    const logout = usePersistentLogout();
    return <Button onClick={logout}>登出</Button>;
}

这个方法的核心是利用React-admin的useLogout和useStore hook，在登出前后完成数据的备份与恢复。

3. 避开React-admin的清理范围（谨慎使用） #

如果你直接使用localStorage存储自定义偏好，且不想让React-admin清理它们，确保你的键名不以"ra-"开头，同时配合方案1的自定义存储适配器，让clear方法跳过这些键。若使用默认的localStorageStore，它会清空整个localStorage，此方法不生效。

内容的提问来源于stack exchange，提问作者Marin M