由于登录判断是在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到后台主界面的时候,,这几个变量的值,我测试的结果:
刷新到主界面:
(!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获取到后再执行后面的代码,你会疯的……
网友评论