React中利用Local Storage实现页面刷新时保持用户登录状态

嗨，我来帮你搞定页面刷新后保持登录状态的问题！

核心思路就是在页面初始化/组件挂载时读取Local Storage里的用户数据，同步到你的应用状态中。下面分步骤给你拆解：

1. 读取Local Storage中的用户数据 #

Local Storage存储的是字符串格式，所以读取后要先转成对象：

// 读取存储的登录信息，没有的话返回null
const savedUser = localStorage.getItem('user');
const currentUser = savedUser ? JSON.parse(savedUser) : null;

2. 把数据同步到应用状态里 #

根据你用的框架，这里分两种常见场景举例：

React 函数组件示例 #

你可以在初始化状态时直接从Local Storage取数，或者用useEffect在组件挂载后设置：

import { useState, useEffect } from 'react';

function App() {
  // 方式1：初始化状态时直接读取Local Storage
  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
  });

  // 方式2：组件挂载后读取并更新状态（适合需要额外逻辑的场景）
  // useEffect(() => {
  //   const savedUser = localStorage.getItem('user');
  //   if (savedUser) {
  //     setUser(JSON.parse(savedUser));
  //   }
  // }, []);

  // 登出时记得清空Local Storage和状态
  const handleLogout = () => {
    setUser(null);
    localStorage.removeItem('user');
  };

  return (
    <div>
      {user ? (
        <div>
          <p>欢迎回来，{user.displayName}！</p>
          <button onClick={handleLogout}>登出</button>
        </div>
      ) : (
        <button>去登录</button>
      )}
    </div>
  );
}

Vue 3 组件示例 #

在onMounted钩子中读取数据，同步到响应式状态：

<script setup>
import { ref, onMounted } from 'vue';

const user = ref(null);

onMounted(() => {
  const savedUser = localStorage.getItem('user');
  if (savedUser) {
    user.value = JSON.parse(savedUser);
  }
});

// 登出逻辑
const handleLogout = () => {
  user.value = null;
  localStorage.removeItem('user');
};
</script>

3. 结合Firebase的额外优化 #

既然你用了Firebase，其实可以结合它的内置状态监听来做双重保障，避免手动存储和状态不同步：

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
// 应用初始化时监听Firebase的Auth状态变化
onAuthStateChanged(auth, (firebaseUser) => {
  if (firebaseUser) {
    // 有用户时，同步到Local Storage和应用状态
    const userData = {
      uid: firebaseUser.uid,
      displayName: firebaseUser.displayName,
      email: firebaseUser.email
    };
    localStorage.setItem('user', JSON.stringify(userData));
    setUser(userData); // 这里的setUser是你的状态更新方法
  } else {
    // 登出时清空数据
    localStorage.removeItem('user');
    setUser(null);
  }
});

这样不管是页面刷新，还是Firebase自动恢复登录状态，都能保证你的应用状态和Local Storage保持一致，用户刷新页面后就不会自动退出啦！

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