小编Mat*_*oak的帖子

我决定尝试将大部分 API 函数转移到 SWR，因为它让我可以做更多事情！

问题

然而，我遇到了一个巨大的问题，我无法弄清楚如何正确地将标头传递到 SWR 中。我已经查看了文档和更多内容，但似乎没有任何效果。我正在使用 Twitch API、Next.js 和 NextAuth 来处理令牌、会话等。我在下面留下了我的 GitHub 存储库以及我当前尝试使用的代码。

笔记：

如果还发生错误，我控制台会记录错误返回，当我访问页面时，/dash它说failed to load还没有错误的控制台日志？

Github 仓库

import axios from "axios";
import Link from "next/link";
import {
  VStack,
  Heading,
  Divider,
  Text,
  Box,
  Badge,
  Center,
} from "@chakra-ui/react";
import { useSession } from "next-auth/react"
import useSWR from 'swr'

const fetcher = (url) => {
  const { data: session, status } = useSession()
  axios
    .get(url, { 
        headers: { 
          'Authorization': `Bearer ${session.accessToken}`,
          'Client-Id': `${process.env.TWITCH_CLIENT_ID}`
        }}) …

长话短说，我刚刚完成了使用 NextJs、NextAuth 和 SWR 构建应用程序的工作，我使用 SWR 调用多个 Twitch API，以验证 Twitch API 我使用我的 Twitch 应用程序 Client-Id 和登录用户的 Bearer 令牌取自 NextAuth 的会话对象。

我担心的是，每当 SWR 执行 API 函数来用数据填充页面或更新页面时，您可以在 Chrome 或 Firefox 开发工具中捕获网络调用时轻松查看请求标头。这主要是因为这是一个生产环境，而且这种情况仍然会发生，这也违反了 Twitch 开发人员文档，并且肯定有“警告：将您的令牌视为密码。例如，切勿在任何公共 URL 中使用访问令牌，并且切勿在任何网页上显示令牌，无需单击即可反混淆。 ”

有没有办法或解决方案来隐藏这些？

现在我的下一个最好的问题是我怎样才能阻止这种情况发生，他们是一种方法吗？