javascript - 如何使用 react-google-login 从 google oauth 注销

Question

我制作了goole登录和注销系统react-google-login

我在这里检查示例代码，并在我的源代码中实现。

现在，登录效果很好，但是当单击注销按钮时，它会显示登录弹出窗口。

const baseURL = "http://localhost:8008";

class AuthWidget extends React.Component {
  constructor(props) {
     super(props);
     if (localStorage.getItem("email")){
        this.state = {
          isLogin:true,
          email:localStorage.getItem("email")
        }
     }
     else {
      this.state = {
        isLogin:false,
        email:""
      }
     }

  }
  handleGoogleLogin(response){
     console.log(response.accessToken);
     axios
        .post(`${baseURL}/myconvert-token`, {
           token: response.accessToken,
           backend: "google-oauth2",
           grant_type: "convert_token",
           client_id: drfClientId, 
           client_secret: drfClientSecret,
        })
        .then((res) => {
           console.log(res);
           const { access_token, refresh_token,email } = res.data;
           console.log({ access_token, refresh_token});
           
           localStorage.setItem("access_token", access_token);
           localStorage.setItem("refresh_token", refresh_token);
           
           console.log("login success");
           this.setState({isLogin:true,email:res.data['email']});
        })
        .catch((err) => {
           console.log("Error Google login", err);
        });
  };
   
  render(){
      if(this.state.email != ""){
        return (
          <div>
          {this.state.email}
          </div>
          );
      }
      else {
        return (
           <React.Fragment>         
           <GoogleLogin
           clientId={googleClientId}
           isSignedIn={true}
           buttonText="LOGIN WITH GOOGLE"
           onSuccess={(response) => this.handleGoogleLogin(response)}
           render={(renderProps) => (
            <button
                    onClick={renderProps.onClick}
                    disabled={renderProps.disabled}
                    type="button"
                    class="login-with-google-btn"
                 >
                    Sign in with Google
                 </button>
              )}
              onFailure={(err) => console.log("Google Login failed", err)}
           />

     </React.Fragment>
        );
          }
 }
}



export default function HeaderLinks(props) {
  const classes = useStyles();
  const logout = () => {
    console.log("test");
    localStorage.setItem("email","");
    localStorage.setItem("access_token", "");
    localStorage.setItem("refresh_token", "");
  }
  return (
    <List className={classes.list}>
      <ListItem className={classes.listItem}>
      <Button
          href="/"
          color="transparent"
          className={classes.navLink}
        >
      Top
      </Button>
      </ListItem>
        { localStorage.getItem("email") &&
          
      <ListItem className={classes.listItem}>
      <Button
          href="/dashboard"
          color="transparent"
          className={classes.navLink}
        >
      Dashboard
      </Button>
      </ListItem>
    
      }

      <ListItem className={classes.listItem}>
      <Button
          href="/dashboard"
          color="transparent"
          className={classes.navLink}
        >
      <AuthWidget></AuthWidget>
      </Button>
      </ListItem>

      <ListItem className={classes.listItem}>
      <Button color="transparent" className={classes.navLink} onClick={logout}>
        Logout
        </Button>
      </ListItem>
     
      
 
    </List>
  );
}