在更改路由时响应身份验证闪烁问题

我正在构建几个应用程序 react ,最后一个是管理面板,所以我的 反应 应用程序必须有身份验证,绝对是我使用的所有产品 Server Side Rendering .

对于最后一个案例,后端团队使用pass me Token 对于处理授权,它们的技术是 Java ,请 Spring ,请 Redis 等基础。

当我发送 username 和 password 到他们的服务器,如果信息正确,他们会给我发送 token 还有别的东西,我把它放在 localStorage 改变根 state 属于 反应 应用程序作为登录,因为此更改应用程序使用不同的 routing .

一切看起来都很好,但是当我刷新页面时会发生什么? 在这里 问题会发生的, login 状态 是 false 所以应用程序转到登录页面,在 componentDidMount 我读了 本地存储 然后找出 噢! 我以前得到了令牌,应用程序已登录,因此更改 登录 状态 到 true .

酒店雇员和饭馆雇员 闪烁发生了,我不知道如何阻止这件坏事。

我的根 状态 如下所示:

class App extends Component {

    constructor() {
        super();

        this.state = { //the root state
            login: false,
        };

    };
    ...

这个 组件安装 如下所示:

componentDidMount() {
    this.loginStateHandler(!!JSON.parse(localStorage.getItem('accessToken')));
};

loginStateHandler = (login) => {

    if (!login) {

        localStorage.clear();
    }

    this.setState({
        login,
    });
};

登录路由和应用路由之间的切换 render 名为的根组件的函数 App ,见以下代码:

        {
            this.state.login
                ? (
                    <div className={styles['app-wrapper']}>
                        <div className={styles['app-wrapper__top']}>
                            <Button classes={{root: this.props.classes.exitButton}} onClick={this.logoutHandler}>
                                exit
                            </Button>
                        </div>
                        <AppRoutes key='appRoutes' fetchManager={this.fetchManager}/>
                    </div>
                )
                : (
                    <LoginRoutes loginHandler={this.loginHandler}/>
                )
        }

如何编写防止这种闪烁的身份验证。我希望应用程序在第一次呈现之前决定用户是否登录。有可能吗?