登陆注册+无感刷新 设计逻辑

1 login:
返回access_token_tenantName,1h httpOnly ; production加secure
refresh_token_tenantName,7days httpOnly ; production加secure
userpublic_tenantName,7days, not httpOnly , 

2. Layout:
从userpublic恢复状态。由于userpublic和refresh应该是同时过期的,所以没问题

但是最好加一个只执行一次的refresh逻辑!【这样所有的页面都会useEffect执行slient refresh

'use client'

import { useEffect, useRef } from 'react'

export default function Layout({ children }: { children: React.ReactNode }) {
  const refreshed = useRef(false)

  useEffect(() => {
    if (refreshed.current) return
    refreshed.current = true

    // 静默刷新 token
    fetch('/api/auth/check-or-refresh', {
      credentials: 'include'
    }).then(res => {
      if (!res.ok) {
        // token/refresh 全部失效时,可选提示或跳转登录
        console.warn('登录已过期')
      }
    })
  }, [])

  return (
    <>
      {children}
    </>
  )
}

 

3. account: 

【防止hard nav,虽然会经过layout的useEffect静默刷新,但使用SSR更加安全】
检查access_token_tenantName合法性,
  不合法:refresh_token_tenantName合法性?
    不合法:清除3个cookie
    合法: 新 access_token_tenantName,1h;
  合法: 进入account组件。

4. logout:
清除3个cookie

posted @ 2025-07-11 01:25  PEAR2020  阅读(14)  评论(0)    收藏  举报