Question

我有一个关于如何使用 React 在网络上注销我的谷歌帐户的问题。

登录成功，只是我注销后重新登录，因为之前的账号还在登录，所以无法再次选择账号。

当我按下“注销”按钮，会话消失并提示用户再次登录时，我该如何实现？

我使用的以下脚本：

GoogleLoginnya.jsx

import GoogleLogin from 'react-google-login';
import { withRouter } from 'react-router-dom';


class GoogleLoginnya extends Component {
    constructor(props) {
        super(props)
        this.state = {
            setName: '',
            setEmail: '',
            setAccessToken: '',
        };
    }
    
    responseGoogle = response => {

        window.sessionStorage.setItem("access_token", response.accessToken);
        window.sessionStorage.setItem("nama", response.profileObj.name);
        

        this.props.history.push(`/menu`);
        console.log(response);
    }


    render() {
        return (
            <div>
                <GoogleLogin
                    clientId= {process.env.REACT_APP_GOOGLE_CLIENT_ID}
                    scope="https://www.googleapis.com/auth/drive.metadata.readonly"
                    buttonText="Login"
                    onSuccess={this.responseGoogle}
                    onFailure={this.responseGoogle}
                    cookiePolicy={'single_host_origin'}
                />
            </div>

        )
    }
}

export default withRouter(GoogleLoginnya);

Menu.jsx

import React, { Component, Fragment } from 'react';
import './Menu.css'
import ClickOutside from '../../components/ClickOutside';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import GoogleLogout from 'react-google-login';

import user2 from '../../images/user2.png';
import Gmail from '../../images/gmail.png';
import Drive from '../../images/drive.png';
import Meet from '../../images/gmeet.png';
import Form from '../../images/form.png';
import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';

import '@trendmicro/react-sidenav/dist/react-sidenav.css';



class Menu extends Component {

    constructor(props) {
        super(props)
        this.state = {
            token: sessionStorage.getItem("access_token"),
            username: sessionStorage.getItem("nama"),
            user_role: '',
            datauser: [],
            expanded: false,
            accessToken: '',
            isLogined: false,
        };

        this.logout = this.logout.bind(this);
        this.handleLogoutFailure = this.handleLogoutFailure.bind(this);
    }

    logout = response => {
        this.setState(state => ({
            isLogined: false,
            token: ''
        }),
        console.log(response)
        );
        
    }

    handleLogoutFailure(response) {
        console.log('Failed to log out')
    }




    render() {
        return (
            <Fragment>
                <ClickOutside
                    onClickOutside={() => {
                        this.setState({ expanded: false });
                    }}
                >
                    <SideNav
                        expanded={this.state.expanded}
                        onToggle={(expanded) => {
                            this.setState({ expanded });
                        }}
                        onSelect={(selected) => {
                            if (selected === "") {
                                window.sessionStorage.clear();
                            }
                            const to = '/' + selected;
                            if (this.props.location.pathname !== to) {
                                this.props.history.push(to);
                            }
                        }}
                        style={{ backgroundColor: '#46B2DB', position: 'fixed' }}
                    >
                        <SideNav.Toggle />
                        <SideNav.Nav>
                            <NavItem eventKey="drive">
                                <NavIcon>
                                    <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Google Drive
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="gmail">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Gmail
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="meet">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Google Meet
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="form">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Google Form
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    <GoogleLogout
                                        clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
                                        buttonText='Logout'
                                        onLogoutSuccess={this.logout}
                                        onFailure={this.handleLogoutFailure}
                                        render={renderProps => (
                                            <input type='button' value="LOGOUT" onClick={renderProps.onClick} />)}
                                    />
                                </NavText>
                            </NavItem>
                        </SideNav.Nav>
                    </SideNav>
                </ClickOutside>
                <div className="background-nya">
                    <div className="header">
                        <p className="headerLabel-fix"> Name Apps </p>
                        <p className="headerLabelUser-fix"> {this.state.username} </p>
                        <p className="headerLabelPass-fix"> {this.state.user_role} </p>
                        <img className="userIcon" src={user2} />
                    </div>
                    <p className="titlePage"> MENU </p>
                    <div className="bagianMenu">
                        <a href='https://drive.google.com/drive/my-drive'>
                            <button className="buttonMenu">
                                <img className="newCaseIcon" src={Drive} />
                            </button>
                        </a>
                        <a href='https://mail.google.com/mail/u/0/#inbox'>
                            <button className="buttonMenu">
                                <img className="inboxIcon" src={Gmail} />
                            </button>
                        </a>
                    </div>
                    <div className="bagianMenu1">
                        <a href='https://meet.google.com/'>
                            <button className="buttonMenu">
                                <img className="draftIcon" src={Meet} />
                            </button>
                        </a>
                        <a href='https://docs.google.com/forms/u/0/?tgif=d'>
                            <button className="buttonMenu">
                                <img className="reportIcon" src={Form} />
                            </button>
                        </a>
                    </div>
                </div>
            </Fragment>
        )
    }
}

export default Menu;

谢谢~

Answer 1

我看到您正在使用 sessionStorage 维护状态。注销时您需要删除该项目。

 logout = response => {
       window.sessionStorage.removeItem("access_token");
        window.sessionStorage.removeItem("nama");
        this.setState(state => ({
            isLogined: false,
            token: ''
        }),
        console.log(response)
        );
    }

另外，你必须使用下面的注销组件

import { GoogleLogout } from 'react-google-login';
<GoogleLogout
  clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
  buttonText="Logout"
  onLogoutSuccess={logout}
>
</GoogleLogout>

或者注销钩子

import { useGoogleLogout } from 'react-google-login'

const { signOut, loaded } = useGoogleLogout({
    jsSrc,
    onFailure,
    clientId,
    cookiePolicy,
    loginHint,
    hostedDomain,
    fetchBasicProfile,
    discoveryDocs,
    uxMode,
    redirectUri,
    scope,
    accessType,
    onLogoutSuccess
  })

signOut() //<-- need to call this in your sign out function

使用 React Apps 注销 Google 帐户

1 个答案: