ant design pro v4登陆页面进行请求会触发页面刷新🧐[问题]

[TravelerAs]

🧐 问题描述

项目使用的是v4版本，需要进行登陆，然后想要获取登陆错误提示信息，但是每次发送请求后，页面都会自动进行一次刷新，导致获取不到接口返回的数据。

💻 示例代码

import React from 'react';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined, CopyrightOutlined } from '@ant-design/icons';
import { accountLogin } from '@/services/user';
import logo from '../../../assets/logo.png';
import styles from './style.less';

function LoginPage() {
  const [form] = Form.useForm();
  const handleSubmit = async (values) => {
    try {
      const result = await accountLogin({ ...values, type: 'account' });
      console.log(result);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div className={styles.main}>
      <div className={styles.loginContainer}>
        <div className={styles.login}>
          <div className={styles.logo}>
            <img alt="logo" src={logo} />
          </div>
          <div className={styles.title}>数据平台</div>
          <div className={styles.loginForm}>
            <Form layout="vertical" onFinish={handleSubmit} initialValues={{}} form={form}>
              <Form.Item label={<span className={styles.formLabel}>账户：</span>} name="username">
                <Input prefix={<UserOutlined style={{ color: 'black' }} />} />
              </Form.Item>
              <Form.Item label={<span className={styles.formLabel}>密码：</span>} name="password">
                <Input.Password
                  prefix={<LockOutlined style={{ color: 'black' }} />}
                  visibilityToggle
                  autoComplete="off"
                />
              </Form.Item>
              <Form.Item>
                <Button block type="primary" onClick={(e) => {
                    e.preventDefault();
                    form.submit();
                  }}>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
      <div className={styles.footer}>
        <div>
          Copyright <CopyrightOutlined /> 2021 xxxxxx有限公司
        </div>
      </div>
    </div>
  );
}

export default LoginPage;

🚑 其他信息

• 系统：windows 10
• antd 版本：4.5.3
• umi版本：3.2.14

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [ant design pro v5权限配置不生效问题 #9524][ant design pro v5权限配置不生效问题][76%]
• [ant design pro v5权限配置不生效问题 #9522][ant design pro v5权限配置不生效问题][76%]
• [🧐[问题] ant design pro 使用中发现一个不知道算不算bug的问题，关于不存在的菜单路由，进行展示的问题？ #9455][🧐[问题] ant design pro 使用中发现一个不知道算不算bug的问题，关于不存在的菜单路由，进行展示的问题？][76%]
• [ant design pro v4如何动态修改ant design组件主题颜色 #7560][ant design pro v4如何动态修改ant design组件主题颜色][63%]
• [🐛[BUG]ant design pro v5 约定式路由后左侧菜单栏在登录页面会显示出来 #9560][🐛[BUG]ant design pro v5 约定式路由后左侧菜单栏在登录页面会显示出来][62%]
• [👑 [需求]ant design pro v5 约定式路由后左侧菜单栏在登录页面会显示出来 #9559][👑 [需求]ant design pro v5 约定式路由后左侧菜单栏在登录页面会显示出来][62%]
• [🧐[问题]ant design pro V5 react版本动态路由绑定 #9534][🧐[问题]ant design pro V5 react版本动态路由绑定][61%]
• [Ant Design Pro V5 已经支持预览 #6605][Ant Design Pro V5 已经支持预览][61%]
• [Ant Design Pro Users 👨🏻‍💻👩🏻‍💻👨🏻‍💻👩🏻‍💻 #99][Ant Design Pro Users 👨🏻‍💻👩🏻‍💻👨🏻‍💻👩🏻‍💻][60%]

[chenshuai2144]

查一下你的项目里是不是有类似这样的代码，应该是错误处理导致的

[TravelerAs]

问题已经找到了。在request.js中，进行errorHandler处理时，设置了响应状态码的监听，因为服务端传递了登陆错误信息为401,导致会定向到登陆页面，从而触发了页面刷新问题。

[TravelerAs]

@chenshuai2144 是的，存在相似的原因，目前已解决。