• 当用户登录时，您将凭据发送到pages/api/auth/login。您检查验证并创建令牌。

我使用cookies-next库来处理cookie。

import { setCookie } from "cookies-next";

export default async function handler(req: NextApiRequest,res: NextApiResponse)
 {
  // pass all the checking
  const token = await jwt.sign(credentials,secret)
  setCookie("jwt", token, { req, res, maxAge: 60 * 60 * 24 });
}

• 每次发出请求时，都将令牌附加到报头。

使用cookies-next

import { getCookie } from "cookies-next";

  const jwt = getCookie("jwt");

 const response = await axios.get(`${process.env.BASE/whatever}`, {
    headers: {
      Authorization: `Bearer ${jwt}`,
    },
  });

• 以前在服务器端函数中，我们可以访问req对象并检查用户是否经过身份验证。为了在next.js中处理此问题，我创建了一个端点api/auth/me。我向此端点发送了一个请求，以检查用户是否具有有效的jwt。我必须在app目录的顶层组件中执行此操作。我创建了一个Authentication Context，并在useEffect中检查用户的状态。

在身份验证上下文中，客户端组件

const fetchUser = async () => {
    setAuthState({
      data: null,
      error: null,
      loading: true,
    });
    try {
      const jwt = getCookie("jwt");

      if (!jwt) {
        return setAuthState({
          data: null,
          error: null,
          loading: false,
        });
      }

      const response = await axios.get(`${process.env.BASE/api/auth/me}`, {
        headers: {
          Authorization: `Bearer ${jwt}`,
        },
      });

      setAuthState({
        data: response.data,
        error: null,
        loading: false,
      });
    } catch (error: any) {
      setAuthState({
        data: null,
        error: error.response.data.errorMessage,
        loading: false,
      });
    }
  };

   useEffect(() => {
     fetchUser();
   }, []);

• 这是pages/api/auth/me端点。

我在auth上下文中发出请求

export default async function handler(req: NextApiRequest,res: NextApiResponse)
 {
  const bearerToken = req.headers["authorization"] as string;
  const token = bearerToken.split(" ")[1];

  const payload = jwt.decode(token) as { email: string };

  if (!payload.email) {
    return res.status(401).json({
      errorMessage: "Unauthorized request",
    });
  }

  const user = yourFetchUser(payload.email)

  if (!user) {
    return res.status(401).json({
      errorMessage: "User not found",
    });
  }

  return res.json({...user});
}

• 检查用户是否在导航栏中通过身份验证。

这是一个客户端组件

const { data, loading } = useContext(AuthenticationContext);

根据您设置的数据有条件地显示用户名或登录按钮。

• 最后，使用cookies-next注销非常简单

import { removeCookies } from "cookies-next";

removeCookies("jwt");