关于 ant design pro 登录需要登录两次问题

发布时间 2023-12-30 12:06:34作者: zachry-r

 

时间: 2023.12.30

问题: ant pro 关于用户登录需要点击两次登记才能进入后台问题

出现问题的原因: 在submit 登录提交的时候设置用户状态的语句

setInitialState({

loginUser: loginUser,

});

此时设置完成后,会进入 app文件

onPageChange: () => {

const { location } = history;

// 如果没有登录,重定向到 login

 

if (!initialState?.loginUser && location.pathname !== loginPath) {

history.push(loginPath);

}

},

这里会进行判断 initialState 的值。第一次到这里的时候,此时的值为null ,第二次再登录值就有了

登录成功后我们已经给loginUser赋值了呀,为什么没有值呢? 

官方解释了问题的原因就是众所周知得组件销毁了还在设置状态(setState方法是异步更新的)

所以我的解决方式是:

 

登录提交时:在登录成功后获取到 res.data

if(res.data){

await fetchUserInfo(res.data);

}

 

// 同步设置loginUser 的内容

const fetchUserInfo = async (loginUser: API.LoginUserVO) => {

if (loginUser) {

flushSync(() => {

setInitialState({

loginUser: loginUser,

});

});

}

};

 

 

同步设置setInitialState 的内容,这样第一次登录 onPageChange 在进行判断时,就不会出现initialState 没有值的情况