cldV2react/src/pages/User/Login/index.jsx

import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Alert, message, notification, Tabs } from 'antd'
import React, { useState } from 'react'
import ProForm, { ProFormCheckbox, ProFormText } from '@ant-design/pro-form'
import { useIntl, Link, history, FormattedMessage, SelectLang, useModel } from 'umi'

import styles from './index.less'
import { apiLogin } from '@/services/login'
import { setAuthCache } from '@/utils/auth'
import { TOKEN_KEY } from '@/utils/cache/cacheEnum'
import { DEFAULT_CACHE_TIME } from '@/settings/encryptionSetting'

const LoginMessage = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24
    }}
    message={content}
    type="error"
    showIcon
  />
)

const Login = () => {
  const [submitting, setSubmitting] = useState(false)
  const [userLoginState, setUserLoginState] = useState({})
  const [type, setType] = useState('account')
  const { initialState, setInitialState } = useModel('@@initialState')

  const intl = useIntl()

  const fetchUserInfo = async () => {
    const userInfo = await initialState?.fetchUserInfo?.()
    const permData = await initialState?.fetchPermData?.()
    if (userInfo) {
      setInitialState({ ...initialState, ...userInfo, permData })
      // const { username, staffId: id, wsToken: token } = userInfo?.currentUser
      // ws.init(`ws://cld2qa.com/summon/v1/chat/link?username=${username}&id=${id}&token=${token}`, {
      //   onMessage
      // })
    }
    return userInfo
  }

  /** 此方法会跳转到 redirect 参数所在的位置 */
  const goto = username => {
    if (!history) return
    setTimeout(() => {
      const { query } = history.location
      const { redirect } = query
      history.push(redirect || '/')
      return notification.success({
        message: intl.formatMessage({ id: 'pages.login.success.title' }),
        description: redirect && `${intl.formatMessage({ id: 'pages.login.success.desc' })}: ${username}`,
        duration: 3
      })
    }, 10)
  }

  const handleSubmit = async values => {
    setSubmitting(true)
    try {
      // 登录
      const res = await apiLogin({ ...values })
      if (res.code === 0) {
        setAuthCache(TOKEN_KEY, res.data.token, DEFAULT_CACHE_TIME)

        // const defaultLoginSuccessMessage = intl.formatMessage({
        //   id: 'pages.login.success',
        //   defaultMessage: '登录成功！'
        // })
        // message.success(defaultLoginSuccessMessage)
        const userinfo = await fetchUserInfo()
        /** 此方法会跳转到 redirect 参数所在的位置 */
        return goto(userinfo?.currentUser?.username)
      }
      // 如果失败去设置用户错误信息
      setUserLoginState(res.msg)
    } catch (error) {
      const defaultLoginFailureMessage = intl.formatMessage({
        id: 'pages.login.failure',
        defaultMessage: '登录失败，请重试！'
      })

      return message.error(defaultLoginFailureMessage)
    }
    return setSubmitting(false)
  }
  const { status, type: loginType } = userLoginState

  return (
    <div className={styles.container}>
      <div className={styles.lang} data-lang>
        {SelectLang && <SelectLang />}
      </div>
      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.header}>
            <img alt="logo" className={styles.logo} src="/logo.svg" />
            <span className={styles.title}>CLD.V2</span>
          </div>
          <div className={styles.desc}>{intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}</div>
        </div>

        <div className={styles.main}>
          <ProForm
            initialValues={{
              autoLogin: true
            }}
            isKeyPressSubmit
            submitter={{
              searchConfig: {
                submitText: intl.formatMessage({
                  id: 'pages.login.submit',
                  defaultMessage: '登录'
                })
              },
              render: (_, dom) => dom.pop(),
              submitButtonProps: {
                loading: submitting,
                size: 'large',
                style: {
                  width: '100%'
                }
              }
            }}
            onFinish={async values => {
              handleSubmit(values)
            }}
          >
            <Tabs activeKey={type} onChange={setType}>
              <Tabs.TabPane
                key="account"
                tab={intl.formatMessage({
                  id: 'pages.login.accountLogin.tab',
                  defaultMessage: '账户密码登录'
                })}
              />
              {/* <Tabs.TabPane
                key="mobile"
                tab={intl.formatMessage({
                  id: 'pages.login.phoneLogin.tab',
                  defaultMessage: '手机号登录',
                })}
              /> */}
            </Tabs>

            {status === 'error' && loginType === 'account' && (
              <LoginMessage
                content={intl.formatMessage({
                  id: 'pages.login.accountLogin.errorMessage',
                  defaultMessage: '账户或密码错误'
                })}
              />
            )}
            {type === 'account' && (
              <>
                <ProFormText
                  name="username"
                  fieldProps={{
                    size: 'large',
                    prefix: <UserOutlined className={styles.prefixIcon} />
                  }}
                  placeholder="用户名"
                  rules={[
                    {
                      required: true,
                      message: (
                        <FormattedMessage id="pages.login.username.required" defaultMessage="请输入用户名!" />
                      )
                    }
                  ]}
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={styles.prefixIcon} />
                  }}
                  placeholder="密码"
                  rules={[
                    {
                      required: true,
                      message: (
                        <FormattedMessage id="pages.login.password.required" defaultMessage="请输入密码！" />
                      )
                    }
                  ]}
                />
              </>
            )}
            <div
              style={{
                marginBottom: 24
              }}
            >
              <ProFormCheckbox noStyle name="autoLogin">
                <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
              </ProFormCheckbox>
              <a
                style={{
                  float: 'right'
                }}
              >
                <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
              </a>
            </div>
          </ProForm>
        </div>
      </div>
    </div>
  )
}

export default Login