瀏覽代碼

feat: 优化登录成功的提示ui

lanjianrong 4 年之前
父節點
當前提交
6f4c7f72ef
共有 3 個文件被更改,包括 28 次插入20 次删除
  1. 1 1
      src/components/RightContent/index.tsx
  2. 2 1
      src/locales/zh-CN/pages.js
  3. 25 18
      src/pages/User/Login/index.jsx

+ 1 - 1
src/components/RightContent/index.tsx

@@ -63,7 +63,7 @@ const GlobalHeaderRight: React.FC = () => {
       </span> */}
       {!isMobile() && <Book />}
 
-      <Notify />
+      {/* <Notify /> */}
       <Avatar />
       {REACT_APP_ENV && REACT_APP_ENV !== 'prod' && (
         <span>

+ 2 - 1
src/locales/zh-CN/pages.js

@@ -19,6 +19,7 @@ export default {
   'pages.login.forgotPassword': '忘记密码 ?',
   'pages.login.submit': '提交',
   'pages.login.loginWith': '其他登录方式 :',
-  'pages.login.success': '登录成功',
+  'pages.login.success.title': '登录成功',
+  'pages.login.success.desc': '欢迎回来',
   'pages.login.registerAccount': '注册账户'
 }

+ 25 - 18
src/pages/User/Login/index.jsx

@@ -1,5 +1,5 @@
 import { LockOutlined, UserOutlined } from '@ant-design/icons'
-import { Alert, message, Tabs } from 'antd'
+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'
@@ -21,16 +21,6 @@ const LoginMessage = ({ content }) => (
   />
 )
 
-/** 此方法会跳转到 redirect 参数所在的位置 */
-const goto = () => {
-  if (!history) return
-  setTimeout(() => {
-    const { query } = history.location
-    const { redirect } = query
-    history.push(redirect || '/')
-  }, 10)
-}
-
 const Login = () => {
   const [submitting, setSubmitting] = useState(false)
   const [userLoginState, setUserLoginState] = useState({})
@@ -49,6 +39,23 @@ const Login = () => {
       //   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 => {
@@ -59,14 +66,14 @@ const Login = () => {
       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)
-        await fetchUserInfo()
+        // const defaultLoginSuccessMessage = intl.formatMessage({
+        //   id: 'pages.login.success',
+        //   defaultMessage: '登录成功!'
+        // })
+        // message.success(defaultLoginSuccessMessage)
+        const userinfo = await fetchUserInfo()
         /** 此方法会跳转到 redirect 参数所在的位置 */
-        return goto()
+        return goto(userinfo?.currentUser?.username)
       }
       // 如果失败去设置用户错误信息
       setUserLoginState(res.msg)