Next.js应用用户认证状态更新后如何实现页面重渲染？

当前代码的核心问题是：登录成功后未主动更新user状态，导致React无法感知用户状态变化触发重渲染；同时依赖sessionStorage的被动读取逻辑，无法实时响应登录操作后的状态变更。

1. 修复登录逻辑，主动更新用户状态 #

在page.js的signInHandle函数中，拿到登录返回的用户数据后，直接调用setUser更新状态，这是触发重渲染的关键：

const signInHandle= async ()=>{
  setLoading(true)
  try {
    const data = await firebaseAuth.signInWithGithub()
    await firestore.addUser(data)
    // 直接用登录返回的用户数据更新状态，触发重渲染
    setUser(data)
    // 若需要用解密后的token数据，也可以这样写：
    // setUser(firebaseAuth.decrypt(data.accessToken))
  } catch (err) {
    console.error(err)
  } finally {
    setLoading(false)
  }
}

2. 优化页面刷新后的状态恢复逻辑 #

保留初始加载时从sessionStorage读取Token恢复状态的逻辑，确保页面刷新后用户状态不丢失：

const [user, setUser]= useState(null)  

useEffect(()=>{
  const token = sessionStorage.getItem("Token")
  if (token){
    try{
      const data = firebaseAuth.decrypt(token)
      setUser(data)
    }catch(error){
      console.log(error)
    }
  }
}, [])

3. 完善登出逻辑，同步更新状态 #

如果有登出功能，调用登出接口后主动清空user状态：

// page.js中添加登出处理函数
const handleLogout = async () => {
  await firebaseAuth.logout()
  setUser(null) // 直接清空状态，触发重渲染
}

同时完善firebase/firebaseAuth.js中的登出函数，确保Firebase Auth状态同步：

logout : async () => {
  await signOut(auth) // 调用Firebase官方登出方法，同步Auth状态
  sessionStorage.removeItem('Token')
},

4. 可选：多标签页状态同步（监听storage变化） #

如果需要处理多标签页登录状态同步的场景，可以在page.js的useEffect中添加storage事件监听：

useEffect(()=>{
  // 初始加载逻辑...

  const handleStorageChange = (e) => {
    if (e.key === 'Token') {
      if (e.newValue) {
        const data = firebaseAuth.decrypt(e.newValue)
        setUser(data)
      } else {
        setUser(null)
      }
    }
  }
  window.addEventListener('storage', handleStorageChange)

  return () => {
    window.removeEventListener('storage', handleStorageChange)
  }
}, [])

• React状态更新（setUser）会自动触发组件重渲染，完全不需要window.reload。
• 登录后主动更新状态是解决当前问题的核心，避免依赖sessionStorage的被动读取逻辑。
• 页面刷新后从sessionStorage恢复状态，保证用户刷新页面后仍保持登录状态。

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