我尝试使用 getAccessTokenWithPop() 在layout.js中获取access_token，但它没有提供任何令牌

Question

main.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Auth0Provider
      domain="dev-fpc4abpe4idt658a.us.auth0.com"
      clientId="9dJ0MOrpMbIOIqV7NqSda3X8PusCyrWm"
      authorizationParams={{
        redirect_uri: "http://localhost:5173",
      }}
      audience="http://localhost:8000"
      scope="openid profile email"
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

布局.js

import React, { useContext, useEffect } from "react";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import { Outlet } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import UserDetailContext from "../../context/UserDetailContext";
import { useMutation } from "react-query";
import { createUser } from "../../utils/api";

const Layout = () => {
  const { isAuthenticated, user, getAccessTokenWithPopup } = useAuth0();
  const { setUserDetails } = useContext(UserDetailContext);

  const { mutate } = useMutation({
    mutationKey: [user?.email],
    mutationFn: () => createUser(user?.email),
  });

   useEffect(() => {
    const getTokenAndRegsiter = async () => {
      console.log("trying to get the token")
      const res = await getAccessTokenWithPopup({
        authorizationParams: {
          audience: "http://localhost:8000",
          scope: "openid profile email",
        },
      });
      console.log("token is : ",res);
      localStorage.setItem("access_token", res);
      setUserDetails((prev) => ({ ...prev, token: res }));
      mutate(res)
    };


    isAuthenticated && getTokenAndRegsiter();
  }, [isAuthenticated]);

  return (
    <>
      <div style={{ background: "var(--black)", overflow: "hidden" }}>
        <Header />
        <Outlet />
      </div>
      <Footer />
    </>
  );
};

export default Layout;

前端工作正常，但我收到一条错误，显示错误：找不到服务：http://localhost:8000

我不明白出了什么问题。我已附上上面的代码。 我是开发新手，请有人帮忙！！

未捕获（承诺中）错误：未找到服务：http://localhost:8000 at new OAuthError2 (errors.tsx:9:11)

Answer 1

您需要为后端 API 创建一个标识符。为了创造它，

1. 转到您创建应用程序的 auth0 站点。
2. 在导航中，转到“API”选项卡。
3. 创建您的自定义 API。
4. 然后转到其设置并将您的“标识符”设置为您的后端受众网址。
5. 单击“保存”即可开始。