ant-design-pro登录过程

点击登录触发以下方法

 

onFinish={async (values) => {
  await handleSubmit(values as API.LoginParams);
}}

const handleSubmit = async (values: API.LoginParams) => {
    try {
      // 登录
      const user = await login({
        ...values,
        type,
      });
      if (user) {
        const defaultLoginSuccessMessage = '登录成功！';
        message.success(defaultLoginSuccessMessage);
        await fetchUserInfo();
        /** 此方法会跳转到 redirect 参数所在的位置 */
        if (!history) return;
        const {query} = history.location;
        const {redirect} = query as {
          redirect: string;
        };
        //重定向到/路由器将他映射到welcome
        history.push(redirect || '/');
        return;
      }
      // 如果失败去设置用户错误信息
      setUserLoginState(user);
    } catch (error) {
      const defaultLoginFailureMessage = '登录失败，请重试！';
      message.error(defaultLoginFailureMessage);
    }
  };

重写login方法请求后端接口，查询结果不为空则显示登录成功，进行重定向，

路由规则{ path: '/', redirect: '/welcome' },就进入了welcome页面。同时要记录当前用户信息，点击登录后请求welcome页面的时候，调用后端获取用户信息方法，查询到就不重定向，不然就重定向到登录页。

export async function getInitialState(): Promise<{
  settings?: Partial<LayoutSettings>;
  currentUser?: API.CurrentUser;
  loading?: boolean;
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    try {
      return await queryCurrentUser();
    } catch (error) {
      history.push(loginPath);
    }
    return undefined;
  };
  // 如果是登录页面或注册页面，则执行
  if (NO_NEED_LOGIN_WHITE_LIST.includes(history.location.pathname)) {
    return {
      fetchUserInfo,
      settings: defaultSettings,
    };
  }
  const currentUser = await fetchUserInfo();
  return {
    fetchUserInfo,
    currentUser,
    settings: defaultSettings,
  };
}

export async function currentUser(options?: { [key: string]: any }) {
  return request< API.CurrentUser>('/api/user/current', {
    method: 'GET',
    ...(options || {}),
  });
}

后端方法：

@Override
    public User getCurrentUser(HttpServletRequest request) {
        Object useObject = request.getSession().getAttribute(USER_LOGIN_STATE);
        User user = (User) useObject;
        if(user == null) {
            return null;
        }
// TODO 校验用户是否合法
        Long userId = user.getId();
        User newUser = userMapper.selectById(userId);
        return getSaftyUser(newUser);
    }

好了，点击登录的时候通过路由跳转到welcome页面，同时获取到当前用户信息就可以进入到welcome页面了。以后有了当前用户信息再访问就不用重新登陆了。