ant design pro 需要登录两次问题

出现的问题：

从ant design pro 官网创建的项目，登录接口替换自己的接口后

问题1：需要点2次登录才能跳转到欢迎页。

问题2：在非登录页刷新后，自动返回了登录页。

百度中：

本人不会前端，不会debug，只会百度😅

百度查了很多帖子，都试过了还是没有解决，找了很久才找到一个能解决我的问题的方法

发现问题：

先说问题2：

是因为刷新页面前端会自动获取currentUser，没拿到就会跳转登录页

知道了这个原因后查看了前端代码，刷新时重新调用了fetchUserInfo查询当前用户信息给currentUser赋值，说明fetchUserInfo没查到用户信息

// 如果不是登录页面，执行
  const { location } = history;
  if (location.pathname !== loginPath) {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: defaultSettings as Partial<LayoutSettings>,
    };
  }
  return {
    fetchUserInfo,
    settings: defaultSettings as Partial<LayoutSettings>,
  };

那问题就在后端这边了，查了代码发现，已经设置登录态存在session中

// 3.记录用户的登录态
     request.getSession().setAttribute(USER_LOGIN_STATE, user);

那是什么原因没查到当前用户信息呢？

一番查找后，在配置文件中发现，session.store-type配置了none，这样是不会在任何地方存储session的，所以登录态设置了也是无效的

由于本人没有redis之类的服务用来存储登录态，这个问题先这样

有想试试的小伙伴可以设置store-type为redis之类的服务，当然自己需要先把使用的服务配置好，否则启动项目会报错

spring:
  session:
    timeout: 86400
    store-type: none

再说问题1：

查看登录代码发现，登录成功后通过setInitialState给currentUser赋值，然后跳转欢迎页

const handleSubmit = async (values: API.UserLoginRequest) => {
    try {
      // 登录
      const res = await userLoginUsingPOST({
        ...values,
      });
      if (res.data) {
        message.success('登录成功！');
        setInitialState({
          ...initialState,
          currentUser: res.data,
        });
        const urlParams = new URL(window.location.href).searchParams;
        history.push(urlParams.get('redirect') || '/');
        return;
      }
      message.error(res.message);
    } catch (error) {
      console.log(error);
      message.error('登录失败，请重试！');
    }
  };

那为什么又跳转回登录页了呢？

在app.tsx中的layout里，有个切换页面判断逻辑，非登录页currentUser没有值就会重定向到登录页

onPageChange: () => {
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
      }
    }

登录成功后我们已经给currentUser赋值了呀，为什么没有值呢？ 

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

解决方法：

找到问题后就可以解决了，登录成功后，设置登录态后，不能立即跳转，需要对跳转设置一个延迟时间setTimeout

const handleSubmit = async (values: API.UserLoginRequest) => {
    try {
      // 登录
      const res = await userLoginUsingPOST({
        ...values,
      });
      if (res.data) {
        message.success('登录成功！');
        setInitialState({
          ...initialState,
          currentUser: res.data,
        });
        // setTimeout解决2次登录跳转问题
        setTimeout(()=>{
          const urlParams = new URL(window.location.href).searchParams;
          history.push(urlParams.get('redirect') || '/');
        },100);

        return;
      }
      message.error(res.message);
    } catch (error) {
      console.log(error);
      message.error('登录失败，请重试！');
    }
  };

声明：本人对前端不太懂，如有错误请指正，本人在积极学习中