NextJs中如何将OAuth接口获取的Discord用户guilds传递到dashboard页面

你可以按照以下步骤实现，这里推荐用Cookie存储+服务端渲染的方案，安全性更高，也符合Next.js的常规开发逻辑：

第一步：完善oauth.tsx接口逻辑 #

你当前的代码漏了await调用json()方法，也没有处理数据的存储/返回逻辑，修改后代码如下：

// 先安装cookie相关依赖：npm i cookie @types/cookie
import { serialize } from 'cookie';
import type { NextApiRequest, NextApiResponse } from 'next';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  // 此处保留你原有获取token_type、access_token的逻辑
  // 注意Discord API需要用https协议
  const guildsuser = await fetch("https://discord.com/api/users/@me/guilds", {
    headers: { Authorization: `${token_type} ${access_token}` },
  });
  // 补上await获取实际的guilds数据
  const guilds = await guildsuser.json();

  // 将guilds序列化后存入HttpOnly Cookie，防止前端篡改，安全性更高
  res.setHeader(
    'Set-Cookie',
    serialize('user_guilds', JSON.stringify(guilds), {
      path: '/',
      httpOnly: true,
      maxAge: 60 * 60 * 24 * 7, // 可自定义有效期，这里设为7天
      secure: process.env.NODE_ENV === 'production' // 生产环境开启仅HTTPS传输
    })
  );

  // 授权完成后重定向到dashboard页面
  res.redirect('/dashboard');
};

第二步：在dashboard页面获取数据并渲染 #

在pages/dashboard.tsx中通过getServerSideProps读取Cookie里的guilds数据，传给页面组件渲染即可：

import { parse } from 'cookie';
import type { GetServerSideProps, NextPage } from 'next';

// 可根据Discord返回的实际结构补全Guild类型
type Guild = {
  id: string;
  name: string;
  icon: string | null;
  permissions?: string;
  [key: string]: any;
};

type DashboardProps = {
  guilds: Guild[];
};

const DashboardPage: NextPage<DashboardProps> = ({ guilds }) => {
  return (
    <div className="dashboard-container">
      <h1>你加入的Discord服务器</h1>
      <div className="guilds-list">
        {guilds.length === 0 ? (
          <p>未获取到任何服务器数据</p>
        ) : (
          guilds.map(guild => (
            <div key={guild.id} className="guild-card">
              <p>{guild.name}</p>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // 从请求头解析Cookie
  const cookies = parse(ctx.req.headers.cookie || '');
  const guilds = cookies.user_guilds ? JSON.parse(cookies.user_guilds) : [];

  return {
    props: {
      guilds
    }
  };
};

export default DashboardPage;

可选方案：客户端调用场景 #

如果你是前端直接调用/api/oauth接口的场景，可以直接在接口里返回guilds数据，前端拿到后存入localStorage或者状态管理库，跳转dashboard后读取渲染即可：

// oauth.tsx 接口返回逻辑
res.status(200).json({ guilds });

注意：如果你的站点已经集成了NextAuth.js，也可以直接把guilds数据存在session里，读取逻辑会更简单。

内容的提问来源于stack exchange，提问作者doctor pok