reactjs - React Render 和 ComponentDidMount 的重定向问题

Question

我有两个网络应用程序

app 1 : first
app 2 : second

这两个应用程序调用一个集中应用程序进行身份验证。集中化应用程序对来自 Office365 的用户进行身份验证并重定向回重定向的 URL。

我面临的问题是当用户手动将 URL 从第一个更改为第二个，反之亦然，即手动更改 URL

www.abc.com/first -> www.abc.com/second OR
www.abc.com/second -> www.abc.com/first

因此，这样做，用户会看到以下页面。页面卡住说等等...

并且只有在清除本地存储（key : hello）后，用户才能继续使用该页面。

这种行为有时会发生

有没有办法在不清除本地存储的情况下完成这项工作（“你好”）

以下是我的代码。（此代码来自中心化应用程序）

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';

import hello from 'hellojs';
import logo from '../images/Logo_Primary.png';

import GraphSdkHelper from '../helpers/GraphSdkHelper';
import {
    graph_redirect_uri,
    graph_applicationId,
    graph_scopes,
    storage_prefix
} from '../helpers/config';

window.hello = hello;
class Login extends Component {
    constructor(props) {
        super(props);

        hello.init({
            aad: {
                name: 'Azure AD',
                oauth: {
                    version: 2,
                    auth: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize'
                },
                form: false
            }
        });

        this.sdkHelper = new GraphSdkHelper({ login: this.login.bind(this) });
        window.sdkHelper = this.sdkHelper;

        this.state = {
            isAuthenticated: !!hello('aad').getAuthResponse()
        };
    }

    componentDidMount() {
        if (this.state.isAuthenticated) {
            this.sdkHelper.getMe((err, me) => {
                if (!err) {
                    localStorage.setItem(
                        `${storage_prefix}token`,
                        hello('aad').getAuthResponse().access_token
                    );
                    localStorage.setItem(`${storage_prefix}user`, JSON.stringify(me));

                    var returnUrl = localStorage.getItem(
                        `${storage_prefix}loginReturnUrl`
                    );
                    if (returnUrl) {
                        localStorage.removeItem(`${storage_prefix}loginReturnUrl`);
                        window.location = returnUrl;
                    }

                    this.props.dispatch(push('/master/app'));
                }
            });
        } else {
            localStorage.removeItem(`${storage_prefix}token`);
            localStorage.removeItem(`${storage_prefix}user`);
            localStorage.removeItem('hello');
        }
    }

    login() {
        hello.init(
            {
                aad: graph_applicationId
            },
            {
                redirect_uri: graph_redirect_uri,
                scope: graph_scopes
            }
        );

        hello.login(
            'aad',
            {
                display: 'page',
                scope: graph_scopes
            },
            () => {
                window.location.href = graph_redirect_uri;
            }
        );
    }

    render() {
        if (!this.state.isAuthenticated) {
            return (
                    <div id='login-form' className='user'>
                        <button
                            type='submit'
                            id='btnLogin'
                            className='btn btn-primary btn-user btn-block'
                            onClick={this.login.bind(this)}
                        >
                            Login with Microsoft Account
                            </button>
                    </div>
            );
        } else {
            return <h1>Wait...</h1>;
        }
    }
}

const mapStateToProps = store => ({
    location: store.router.location
});

export default connect(mapStateToProps)(Login);

标签： reactjsreact-nativereact-reduxreact-hooks