Next.js将页面/API路由视为客户端组件?

wbgh16ku  于 2022-12-29  发布在  其他
关注(0)|答案(1)|浏览(109)

我有一个简单的API路由src/pages/api/me.ts,它只回显用户是否登录。

import { NextApiRequest, NextApiResponse } from 'next'
import { getSession } from '../../lib/session'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    let user = getSession();
    res.status(200).end((user) ? 'yes' : 'no')
}

导入文件../../lib/session('src/lib/session. ts):

import { cookies } from 'next/headers';
import jwt from 'jsonwebtoken'

export const getSession = () => {
    const nxtCookies = cookies();

    if (nxtCookies.has('wp_session')) {
        const cookie = nxtCookies.get('wp_session');

        // prints on the server
        console.log('this is happening on the server')

        let sessionData = jwt.verify(cookie.value, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
            if (err) return false;
            return user;
        });

        if (sessionData) return sessionData;
    }

    return false;
}

当我尝试从pages/api/me.ts调用getSession()时,出现错误:
./源代码/库文件/会话. ts
您正在导入一个需要next/header的组件。这只适用于服务器组件,但它的父组件之一被标记为"使用客户端",因此它是客户端组件。
从"下一页/标题"导入{cookies};:
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
其中一个被标记为带有"use client"的客户端条目:
源文件\库\会话. ts源文件\页面\应用程序接口\方法. ts
这怎么可能呢?两者都是服务器端代码。
我甚至有一个服务器组件使用getSession()来显示网站上的用户信息,这个错误没有被抛出。我甚至通过console.log验证了在该组件和getSession()中,控制台打印到服务器控制台。所以我不确定这是怎么可能的。
具体来说,这里的问题似乎是从next/headers导入cookie

9rygscc1

9rygscc11#

我相信next/headers中的cookies用于服务器组件。src/pages/api/me.ts位于服务器上,但不是服务器 * 组件 *。
您可以通过req.cookies访问请求中的cookie,并将其传递给您的getSession函数。
一种可能的实现方式是:

// src/pages/api/me.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { getSession } from '../../lib/session'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const user = getSession(req.cookies);
  res.status(200).end((user) ? 'yes' : 'no');
}
// src/lib/session.ts
import jwt from 'jsonwebtoken';

export const getSession = (cookies: Partial<Record<string, string>>) => {
  const session = cookies.wp_session;

  if (session) {
    // prints on the server
    console.log('this is happening on the server');

    const sessionData = jwt.verify(session, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
      if (err) return false;
      return user;
    });

    return sessionData;
  }
}

相关问题