美文网首页
ant design pro登录跳转不到主界面或者需要登录两次问

ant design pro登录跳转不到主界面或者需要登录两次问

作者: ABS_e056 | 来源:发表于2019-12-21 12:49 被阅读0次

    由于登录判断是在layouts/SecurityLayout.jsx中,查看路由配置的话,可以看出所有这个组件所属路由下的子路由的访问,都需要登录验证。
    config.js:

    {
                path: '/',
                component: '../layouts/SecurityLayout',
                routes: [],
    }
    

    layouts/SecurityLayout.jsx:

    class SecurityLayout extends React.Component {
        state = {
            isReady: false,
        };
    
        componentDidMount() {
            this.setState({
                isReady: true,
            });
            const { dispatch } = this.props;
    
            if (dispatch) {
                dispatch({
                    type: 'user/fetchCurrent',
                });
            }
        }
    
        render() {
            const { isReady } = this.state;
            const { children, loading, currentUser } = this.props;
            // You can replace it to your authentication rule (such as check token exists)
            // 你可以把它替换成你自己的登录认证规则(比如判断 token 是否存在)
    
            const isLogin = currentUser && currentUser.id;
            const queryString = stringify({
                redirect: window.location.href,
            });
    
            if ((!isLogin && loading) || !isReady) {
                return <PageLoading/>;
            }
    
            if (!isLogin) {
                return <Redirect to={`/user/login?${queryString}`}></Redirect>;
            }
    
            return children;
        }
    }
    

    这个组件在挂载后先fetchCurrent,然后在这里有一句非常关键的 if ((!isLogin && loading) || !isReady) ,我就不详细讨论这个条件的成立的情况了,太多了,只列举直接刷新后台主界面和router.push到后台主界面的时候,\color{#FF0000}{在currentUser还没有获取到之前},这几个变量的值,我测试的结果:
    刷新到主界面:
    (!undefined && undefined) || !false = true;
    (!undefined && true) || !true = true;
    (获取到currentUser了)
    push(登录)到主界面时:
    (!undefined && undefined) || !false = true;
    (!undefined && undefined) || !true = false;
    (获取到currentUser了)
    也就是说,你刷新页面的时候,currentUser值还没有之前,页面会被渲染成<PageLoading/>直到获取到currentUser,然后render子组件,也就是后台界面,而你登录,router.push到主界面时,currentUser值还没有之前,上面的if会有一次不成立,那么就会执行下面的跳转,重新跳转到登录页面,这里面根据每位开发者实际开发式不同的情况,常会出现两个问题,一是死活登录不进去,二是第1次登录不进去,第2次就可以登录进去了。反正原因都是这个了。
    解决的最简单办法就是登录跳转的时候不要用routerRedux.replace(redirect || '/'),见model/login.js,而是直接window.location.href=redirect || '/';

    const params = getPageQuery();
    const { redirect } = params;
    window.location.href = redirect || window.routerBase;
    

    其实这样跳转体验上也差不了多少。
    忠告:最好不要试图修改之前提到的<PageLoading/>的显示情况,让等式成立,等待currentUser获取到后再执行后面的代码,你会疯的……

    相关文章

      网友评论

          本文标题:ant design pro登录跳转不到主界面或者需要登录两次问

          本文链接:https://www.haomeiwen.com/subject/fwxgnctx.html