将 token 设置为 cookie 后水合失败

Question

我目前正在使用 next 14 和应用程序目录，并且我有用于登录的组件，登录后我将访问令牌设置为 cookie 并刷新页面，但是当我刷新页面时，它会抛出错误 Hydration failed

这里是我的客户端设置 cookie 的值：

import Cookies from 'js-cookie'

  // handleFinish
  const handleFinish = async (e: any) => {
    const res = await api.post('/Auth/user/signIn', e)
    if (!res) return
    if (res.status === 200) {
      console.log(res, 'res')
      Cookies.set('access_token', res.data.token,{secure:true,expires:12000})
      toast.success(res.data.message, { position: 'bottom-center' })
      // router.replace('/')
    }
  }

我尝试在服务器组件和客户端组件中设置cookie

我想设置来自端点到cookie的访问值，然后在服务器组件和客户端组件中使用它

Answer 1

我找到了解决方案。

如果您在客户端访问 Cookie，您应该首先检查它是否正确，如下所示：

const [cookie,setCookie]=useState()
    
 useLayoutEffect(()=>{
   if(Cookie.get('access_token') return setCookie(Cookie.get('access_token')) 
 },[])

它帮助我避免了错误。