Reactjs 如何在react中使用@auth0/auth0 spa js通过浏览器刷新持久登录

在我的react应用程序中，我使用@auth0/auth0 spa js库配置了auth0。身份验证有效，但当浏览器刷新时，我需要再次进行身份验证。这不是预期的行为

代码如下：

import React, { Component } from "react";
import createAuth0Client from "@auth0/auth0-spa-js";
import Auth0Client from "@auth0/auth0-spa-js/dist/typings/Auth0Client";
import { Auth0Context } from "../../utils/Contexts";
import { IUserCredential } from "../../utils/Structures";

interface state {
  isAuthenticated: boolean;
  user: IUserCredential;
  auth0Client: Auth0Client;
  loading: boolean;
  popupOpen: boolean;
}

interface props {
  onRedirectCallback(appState?: any): void;
  domain: string;
  client_id: string;
  redirect_uri: string;
  prompt?: 'none' | 'login' | 'consent' | 'select_account';
}


export class Auth0Provider extends React.Component<props, state>{

  constructor(props: props) {
    super(props);
  }

  componentDidMount() {
    this.updateComponent();
  }

  async updateComponent() {
    console.log('in updateComponent');
    const DEFAULT_REDIRECT_CALLBACK = () =>
      window.history.replaceState({}, document.title, window.location.pathname);

    let { onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, children, ...initOptions } = this.props;
    //id_token_hint
    const auth0FromHook = await createAuth0Client(initOptions);

    if (window.location.search.includes("code=")) {
      const { appState } = await auth0FromHook.handleRedirectCallback();
      onRedirectCallback(appState);
    }

    const isAuthenticated = await auth0FromHook.isAuthenticated();

    let user = {} as IUserCredential;

    if (isAuthenticated) {
       user = await auth0FromHook.getUser();
    }

    this.setState({
      auth0Client: auth0FromHook,
      isAuthenticated:isAuthenticated,
      user:user,
      loading: false
    });
  }

  loginWithPopup = async (params = {}) => {
    this.setState({
      popupOpen: true
    })
    try {
      await this.state.auth0Client.loginWithPopup(params);
    } catch (error) {
      console.error(error);
    } finally {
      this.setState({
        popupOpen: false
      })
    }

    const user = await this.state.auth0Client.getUser();
    this.setState({
      user: user,
      isAuthenticated: true
    })

  };

  handleRedirectCallback = async () => {
    this.setState({
      loading: true
    });

    if (this.state.auth0Client) {
      await this.state.auth0Client.handleRedirectCallback();
      const user = await this.state.auth0Client.getUser();
      this.setState({
        loading: false,
        isAuthenticated: true,
        user: user
      })
    }
  };

  private getContextVaules() {

    let contextValues = {
      ...this.state,
      loginWithPopup:this.loginWithPopup,
      handleRedirectCallback:this.handleRedirectCallback,
      getIdTokenClaims: (...p: any) => (this.state.auth0Client as Auth0Client).getIdTokenClaims(...p),
      loginWithRedirect: (...p: any) => (this.state.auth0Client as Auth0Client).loginWithRedirect(...p),
      getTokenSilently: (...p: any) => (this.state.auth0Client as Auth0Client).getTokenSilently(...p),
      getTokenWithPopup: (...p: any) => (this.state.auth0Client as Auth0Client).getTokenWithPopup(...p),
      logout: (...p: any) => (this.state.auth0Client as Auth0Client).logout(...p)
    };

    return contextValues;
  }

  render() {
    return (
      <Auth0Context.Provider value={this.getContextVaules()} >
        {this.props.children}
      </Auth0Context.Provider>
    );
  }

}

import React，{Component}来自“React”；
从“@auth0/auth0”导入CreateAuth0客户端；
从“@auth0/auth0-spa-js/dist/typings/Auth0Client”导入Auth0Client；
从“./../utils/context”导入{Auth0Context}”；
从“../../utils/Structures”导入{IUserCredential}”；
界面状态{
未验证：布尔值；
用户：IUserCredential；
Auth0客户端：Auth0客户端；
加载：布尔；
popupOpen：布尔值；
}
界面道具{
onRedirectCallback（appState？：任意）：无效；
域：字符串；
客户端id：字符串；
重定向_uri:string；
提示？：“无”|“登录”|“同意”|“选择帐户”；
}
导出类Auth0Provider扩展了React.Component{
建造师（道具：道具）{
超级（道具）；
}
componentDidMount（）{
this.updateComponent（）；
}
异步更新组件（）{
log（'in updateComponent'）；
const DEFAULT_REDIRECT_CALLBACK=（）=>
window.history.replaceState（{}，document.title，window.location.pathname）；
让{onRedirectCallback=DEFAULT_REDIRECT_CALLBACK，children，…initOptions}=this.props；
//id\u令牌\u提示
const auth0FromHook=wait createAuth0Client（initOptions）；
if（window.location.search.includes（“code=））{
const{appState}=wait auth0FromHook.handleRedirectCallback（）；
onRedirectCallback（appState）；
}
const isAuthenticated=等待auth0FromHook.isAuthenticated（）；
让user={}作为IUserCredential；
如果（未经验证）{
user=wait auth0FromHook.getUser（）；
}
这是我的国家({
Auth0客户端：auth0FromHook，
isAuthenticated:isAuthenticated，
用户:用户,，
加载：错误
});
}
loginWithPopup=async（参数={}）=>{
这是我的国家({
popupOpen:对
})
试一试{
等待此.state.auth0Client.loginWithPopup（参数）；
}捕获（错误）{
控制台错误（error）；
}最后{
这是我的国家({
弹出打开：错误
})
}
const user=wait this.state.auth0Client.getUser（）；
这是我的国家({
用户:用户,，
我被证实：是的
})
};
HandlerRedirectCallback=async（）=>{
这是我的国家({
加载：正确
});
if（this.state.auth0客户端）{
等待这个.state.auth0Client.HandlerRedirectCallback（）；
const user=wait this.state.auth0Client.getUser（）；
这是我的国家({
加载：false，
我证实：是的，
用户：用户
})
}
};
私有getContextVaules（）{
让contextValues={
…这个州，
loginWithPopup:this.loginWithPopup，
HandlerRedirectCallback:this.HandlerRedirectCallback，
getIdTokenClaims:（…p:any）=>（this.state.auth0客户端作为auth0客户端）。getIdTokenClaims（…p），
loginWithRedirect:（…p:any）=>（this.state.auth0Client作为auth0Client）。loginWithRedirect（…p），
GetTokensilenly:（…p:any）=>（this.state.auth0Client作为auth0Client）。GetTokensilensilensilensilensilensilensilensilensilensilensilensilensilenside（…p），
getTokenWithPopup:（…p:any）=>（this.state.auth0客户端作为auth0客户端）。getTokenWithPopup（…p），
注销：（…p:any）=>（this.state.auth0客户端作为auth0客户端）。注销（…p）
};
返回上下文值；
}
render（）{
返回(
{this.props.children}
);
}
}

我已经阅读了静默身份验证guid，但没有理解该过程。

---

我已在createAuth0Client（）方法的选项中将prompt=none作为参数传递，但在回调url中出错。

我已通过将从更改为解决了问题