如题所述
第1个回答 2022-06-09
由于登录判断是在layouts/SecurityLayout.jsx中,查看路由配置的话,可以看出所有这个组件所属路由下的子路由的访问,都需要登录验证。
config.js:
layouts/SecurityLayout.jsx:
这个组件在挂载后先fetchCurrent,然后在这里有一句非常关键的 if ((!isLogin && loading) || !isReady) ,我就不详细讨论这个条件的成立的情况了,太多了,只列举直接刷新后台主界面和router.push到后台主界面的时候, ,这几个变量的值,我测试的结果:
刷新到主界面:
(!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 || '/';
其实这样跳转体验上也差不了多少。
第二种解决办法是,登录成功的时候返回当前用户的信息,然后保存在currentUser中,而不是跳转到后台的时候才获取currentUser,也就是push到后台的时候,currentUser中必须有值。
config.js:
layouts/SecurityLayout.jsx:
这个组件在挂载后先fetchCurrent,然后在这里有一句非常关键的 if ((!isLogin && loading) || !isReady) ,我就不详细讨论这个条件的成立的情况了,太多了,只列举直接刷新后台主界面和router.push到后台主界面的时候, ,这几个变量的值,我测试的结果:
刷新到主界面:
(!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 || '/';
其实这样跳转体验上也差不了多少。
第二种解决办法是,登录成功的时候返回当前用户的信息,然后保存在currentUser中,而不是跳转到后台的时候才获取currentUser,也就是push到后台的时候,currentUser中必须有值。