Reactjs React Render和ComponentDidMount的重定向问题

我有两个web应用程序

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

这样，用户可以看到下面的页面。页面被卡住，说等待

只有在清除本地存储（键：hello）后，用户才能继续使用该页面

这种行为有时会发生

有没有一种方法可以在不清除本地存储（“hello”）的情况下执行此操作

下面是我的代码。（此代码来自集中式应用程序）

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“已连接路由器”导入{push}；
从“hellojs”导入hello；
从“../images/logo_Primary.png”导入徽标；
从“../helpers/graphsdkheloper”导入GraphSdkHelper；
进口{
图\u重定向\u uri，
图形应用程序ID，
图_范围，
存储前缀
}来自“../helpers/config”；
window.hello=你好；
类登录扩展组件{
建造师（道具）{
超级（道具）；
你好，init({
aad：{
名称：“Azure广告”，
oauth：{
版本：2，
作者：'https://login.microsoftonline.com/common/oauth2/v2.0/authorize'
},
表格：错
}
});
this.sdkHelper=newgraphsdkhelper（{login:this.login.bind（this）}）；
window.sdkHelper=this.sdkHelper；
此.state={
isAuthenticated:！！你好（'aad'）。getAuthResponse（）
};
}
componentDidMount（）{
if（this.state.isAuthenticated）{
this.sdkHelper.getMe（（呃，me）=>{
如果（！err）{
localStorage.setItem(
`${storage\u prefix}令牌`，
您好（'aad'）。getAuthResponse（）。访问\u令牌
);
setItem（`${storage\u prefix}user`，JSON.stringify（me））；
var returnUrl=localStorage.getItem(
`${storage\u prefix}登录返回URL`
);
如果（返回URL）{
removietem（`${storage\u prefix}loginReturnUrl`）；
window.location=returnUrl；
}
这个.props.dispatch（push（'/master/app'））；
}
});
}否则{
removietem（`${storage\u prefix}标记`）；
removietem（`${storage\u prefix}user`）；
localStorage.removietem（'hello'）；
}
}
登录（）{
你好，init(
{
aad：图形应用程序ID
},
{
重定向\u uri：图形\u重定向\u uri，
作用域：图_作用域
}
);
你好，登录(
“aad”，
{
显示：“第页”，
作用域：图_作用域
},
() => {
window.location.href=graph\u redirect\u uri；
}
);
}
render（）{
如果（！this.state.isAuthenticated）{
返回(
使用Microsoft帐户登录
);
}否则{
返回等待。。。；
}
}
}
常量mapStateToProps=存储=>({
位置：store.router.location
});
导出默认连接（MapStateTops）（登录）；

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);