接下来 13 个带有 cookie 的服务器组件出现问题

Question

我有一个代码，我想从前端的用户那里获取cookie并检查它是否与bano相同，因为我在数据库和前端的cookie中都有jwt令牌，当我检查“token”cookie是否存在时，如果不存在，它会重定向您登录，如果存在，它会检查cookie是否与银行的cookie匹配，如果匹配，则释放页面，如果匹配没有，它给出了一个无效的令牌。下代码

"use client"

import { redirect } from 'next/navigation'
import {cookies } from "next/headers"
import { useContext } from 'react'
import { AuthContext } from '../contexts/AuthContext'

export default function ExploreCourses(){
    const {user} = useContext(AuthContext) 

    if(!user.token){
        redirect("/signIn")
    }

    if(user.token){
        const cookie = cookies().get("token")
        if(!cookie == user.token){
            redirect("/signIn")
        }
        return
    }
    
    return(
        <h2>dashboard</h2>
    )
}

** 错误：ReactServerComponentsError：

您正在导入需要 next/headers 的组件。这仅适用于服务器组件，但其父组件之一被标记为“使用客户端”，因此它是客户端组件。 了解更多：https://nextjs.org/docs/getting-started/react-essentials **

现在，我想知道为什么它会给出这个错误，我已经尝试使用nookies，但是要做这个检查我需要 getServerSideProps 函数，所以检查，但它不可用，因为我正在使用 app/ 目录，因为它给出了这个错误？我该如何进行这项检查？我是新使用 next.js

Answer 1

您正在客户端组件内使用仅服务器功能（标头）。您应该删除文件顶部以及所有父级组件上的“使用客户端”。如果您需要客户端交互，您可以创建一个子客户端组件。例如

 "use client"
import { redirect } from 'next/navigation'
import { useContext } from 'react'
import { AuthContext } from '../contexts/AuthContext'

export default function ExploreCourses(props){
    const {user} = useContext(AuthContext) 

    if(!user.token){
        redirect("/signIn")
    }

    if(user.token){
        const cookies = props.cookies
        if(!cookie == user.token){
            redirect("/signIn")
        }
        return
    }
    
    return(<>
        <h2>dashboard</h2>
        </>
    )
}

在另一个文件中

export default function ServerComponent(){
 const cookie = cookies().get("token")
  return( <YourClientComponent cookies={cookie} />
)}

在上面的示例中，YourClientComponent 被标记为“使用客户端”。您可以传递道具来访问服务器上加载的数据。 希望这会有所帮助。