项目背景 : react + ant

需求 : 退出登录后 , 选择了记住登录 , 回显用户名和密码 ; 未选择记住 , 则不回显用户名和密码

如图






注意 : 发现一个鸡肋的问题 , 未勾选退出后 , 还是会回显 , 后来我查看了cookie和自己的逻辑都没问题 , 原来是因为我保存了密码 , 浏览器保存后自动渲染了...


代码实现  , 逻辑不复杂
 

  // 确认登录
  const onFinish = async userInfo => {
    setLoading(true)
    setSubmitLoginName('正在登录...')
    console.log('userInfo.password', md5(userInfo.password))
    console.log('userInfo', userInfo)

    const data = await login({
      ...userInfo,
      password: md5(userInfo.password)
    })

    console.log('data', data)

    console.log('userInfo.password', md5(userInfo.password))

    if (data.code === 200) {
      localStorage.setItem('userName', data.username)
      localStorage.setItem('userId', data.userId)
      localStorage.setItem('token', data.token)
      setLoading(false)
      setSubmitLoginName('登录')
      setTimeout(() => {
        navigate('/dashboard/analysis')
      }, 300)
    } else {
      form.setFields([{ name: 'password', errors: [data.msg] }])
      setLoading(false)
    }

    localStorage.setItem(
      window.envConfig['ROOT_APP_INFO'],
      JSON.stringify({
        data: data
      })
    )

    return
  }

  useEffect(() => {
    // 仅在组件挂载时运行
    const initializeForm = async () => {
      const loginChecked = getCookies('loginChecked')
      if (loginChecked) {
        try {
          const { checked, password, account } = JSON.parse(
            decrypt(loginChecked)
          )
          setChecked(checked)
          // 自动填充表单
          await form.setFieldsValue({
            account,
            password
          })
          // 如果记住登录状态被勾选，则自动聚焦到登录按钮
          if (checked) {
            const loginButton = document.querySelector('.login-form-button')
            loginButton && loginButton.focus()
          }
        } catch (error) {
          console.error('Error initializing form fields:', error)
          // 处理解密或解析错误
          removeCookies('loginChecked', 7) // 出错时清理无效的cookie
        }
      }
    }

    initializeForm()
  }, []) // 空依赖数组表示仅在组件挂载和卸载时运行

  // 记住密码
  const onChange = async e => {
    const loginChecked = getCookies('loginChecked')
    if (loginChecked) {
      setChecked(false)
      removeCookies('loginChecked', 7)
    } else {
      let values = await form.validateFields()
      values.checked = e.target.checked
      setChecked(e.target.checked)
      setCookies('loginChecked', encrypt(JSON.stringify(values)), 7) //7天有效期
    }
  }

    <Form
                name='normal_login'
                className='login-form'
                form={form}
                initialValues={{ remember: false }}
                onFinish={onFinish}
              >
                {/* 用户名 */}
                <Form.Item
                  colon={false}
                  name='account'
                  validateTrigger={['onChange', 'onBlur']} // 添加这一行来触发onChange和onBlur时的验证
                  rules={[
                    { required: true, message: t('userRules') },
                    { min: 6, message: t('userMinLength') },
                    { max: 12, message: t('userMaxLength') },
                    {
                      // pattern: /^[0-9a-zA-Z@~!#$%^&*`.-_]{1,}$/,
                      message: t('noLaw')
                    }
                  ]}
                >
                  <Input
                    size='large'
                    placeholder={t('username')}
                    style={customInputStyle}
                    prefix={
                      <img
                        src={login_user}
                        alt='icon'
                        style={{
                          width: '18px',
                          height: '16px',
                          position: 'absolute',
                          left: '0'
                        }}
                      />
                    }
                    allowClear
                  />
                </Form.Item>

                {/* 密码 */}
                <Form.Item
                  colon={false}
                  name='password'
                  validateTrigger={['onChange', 'onBlur']} // 添加这一行来触发onChange和onBlur时的验证
                  rules={[
                    {
                      required: true,
                      whitespace: false,
                      message: t('passwordRules')
                    },
                    { min: 6, message: t('pasMinLength') },
                    { max: 12, message: t('pasMaxLength') },
                    {
                      pattern: /^[0-9a-zA-Z@~!#$%^&*`_]{1,}$/,
                      message: t('constitute')
                    }
                  ]}
                >
                  <Input.Password
                    style={customInputStyle}
                    prefix={
                      <img
                        src={login_suo}
                        alt='icon'
                        style={{
                          width: '18px',
                          height: '16px',
                          position: 'absolute',
                          left: '0'
                        }}
                      />
                    }
                    type='password'
                    placeholder={t('password')}
                    size='large'
                  />
                </Form.Item>

                <Checkbox onChange={onChange} checked={checked}>
                  {t('remember')}
                </Checkbox>

                <Form.Item colon={false}>
                  <Button
                    type='primary'
                    htmlType='submit'
                    className='login-form-button'
                    loading={loading}
                    disabled={loading}
                  >
                    {t('login')}
                  </Button>
                </Form.Item>
              </Form>