Javascript 如何在page render Next.js之前获取数据

这就是我的问题：

我在我的项目中使用Next.js，通过OAuth服务对用户进行身份验证。因此，用户的流程如下所示：

用户点击“登录按钮”-> 用户被重定向到OAuth提供程序以确认-> 使用url查询参数将用户重定向回我的应用程序

https://kupbsv.vercel.app/?code=1a6a0490bbgCdef75b399e30d&state=2d601e4c-9660-40ff-a1c8-de241844b1c0

-> 我的应用程序使用此参数获取

访问令牌

并将其保存在本地存储-> 然后，我使用这个令牌从提供者获取用户数据，并将其显示在

profile

组件中

该过程工作正常，但在重定向回我的应用程序后，我仍然看到

登录按钮

，好像没有用户，但身份验证已完成，并且我在本地存储中有

访问令牌

。在页面重新加载之后，一切正常，所以问题是页面在获取数据之前呈现。现在，我通过使用查询参数重定向后使用

router.push（'/home'）

解决了这个问题。如果不使用

router.push（）

这是我的密码：

Header.js

export default function Header(props) {
  const { query } = useRouter();
  const router = useRouter();
  const [userName, setUserName] = useRecoilState(recoilUserName)
  const [userPrimaryPaymail, setUserPrimaryPaymail] = useRecoilState(recoilUserPrimaryPaymail)
  const [userEmail, setUserEmail] = useRecoilState(recoilUserEmail)
  const [userAvatarUrl, setUserAvatarUrl] = useRecoilState(recoilUserAvatarUrl)
  const [userStatus, setUserStatus] = useRecoilState(recoilUserStatus)
  const [userAmount, setUserAmount] = useRecoilState(recoilUserAmount)
  const [userCurrency, setUserCurrency] = useRecoilState(recoilUserCurrency)
  const [userId, setUserId] = useRecoilState(recoilUserId)
  const [refreshToggle, setRefreshToggle] = useState(true)


      const userProfile = async() => { 
        if (query.code && !userId) { 
          await handleAuthuser();
          const { profile, balance, userStatus } = await getUserData();
          setUserName(profile.name);
          setUserPrimaryPaymail(profile.primaryPaymail);
          setUserEmail(profile.email);
          setUserAvatarUrl(profile.avatarUrl);
          setUserStatus(userStatus.data.status);
          setUserAmount(balance.amount);
          setUserCurrency(balance.currency);
          setUserId(profile.id);  
        }

        if (storage.getItem('mb_js_client:oauth_access_token') && !userId) {
          const { profile, balance, userStatus } = await getUserData();
          setUserName(profile.name);
          setUserPrimaryPaymail(profile.primaryPaymail);
          setUserEmail(profile.email);
          setUserAvatarUrl(profile.avatarUrl);
          setUserStatus(userStatus.data.status);
          setUserAmount(balance.amount);
          setUserCurrency(balance.currency);
          setUserId(profile.id); 
        } 
      }
      userProfile();


return (
    <div className="main">
      <header className="header">
        <Link as="/" href="/" ><a className="logo">KUPBSV</a></Link>
          <a className="push" >
            {!userId ? <LoginDialog /> :
            <Profile name={userName} userId={userId} primaryPaymail={userPrimaryPaymail} userEmail={userEmail} userAvatar={userAvatarUrl} userAmount={userAmount} userCurrency={userCurrency} userStatus={userStatus}/> }
          </a>
          <a><SimpleMenu userId={userId} /></a>
      </header>
 


handleAuth.js

const { MoneyButtonClient } = require('@moneybutton/api-client')

export default async function handleAuthuser () {
    const client = new MoneyButtonClient('xxxxxxxx');
    client.handleAuthorizationResponse();
    router.push('/home')

}

因此，在使用
LoginDialog
后，用户被重定向到MoneyButton OAuth服务，从那里他被重定向回我的应用程序，url中有查询参数
handleAuth
函数获取查询参数并获取访问令牌以将其保存在本地存储器中
getUserData
正在使用令牌获取用户数据

const { MoneyButtonClient } = require('@moneybutton/api-client')

export default async function handleAuthuser () {
    const client = new MoneyButtonClient('xxxxxxxx');
    client.handleAuthorizationResponse();
    router.push('/home')

}