登录添加谷歌验证

src/api/index.ts

@@ -158,5 +158,8 @@ export default {
   bind_googleCode(data: object) {
     return $axios.post('/admin/bindAuthenticator', data)
   },
+  verify_googleCode(data: object) {
+    return $axios.post('/admin/verifyAuthenticator', data)
+  },
 }
 

src/pages/login/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, FC, useMemo, useState, useRef } from 'react'
 import { useHistory } from 'react-router-dom'
 import { LockOutlined, UserOutlined } from '@ant-design/icons'
-import { Form, Input, Button, Select, Cascader, Space, Row } from 'antd'
+import { Form, Input, Button, Select, Cascader, Space, Row, Modal } from 'antd'
 import ReactCanvasNest from 'react-canvas-nest'
 import './login.less'
 import Logo from '@/assets/img/logo.png'
@@ -9,6 +9,7 @@ import { setUserInfo } from '@/assets/js/publicFunc'
 import { connect } from 'react-redux'
 import * as actions from '@/store/actions'
 import common from '@/api'
+import api from '@/api'
 
 interface Props extends ReduxProps { }
 
@@ -18,9 +19,12 @@ const LoginForm: FC<Props> = ({
 }) => {
 
   const history = useHistory()
+  const [form] = Form.useForm()
 
+  const nameRef = useRef('')
   const [codeUrl, setCodeUrl] = useState('')
   const codeId = useRef('')
+  const [visible, setVisible] = useState(false)
 
   useEffect(() => {
     const { token } = userInfo
@@ -48,6 +52,8 @@ const LoginForm: FC<Props> = ({
   const onFinish = (values: CommonObjectType<string>): void => {
     const { username } = values;
     common.login({ ...values, id: codeId.current }).then((res: any) => {
+      console.log(res);
+      if (res.code === 0 && !res.data.google) {
         // 登录后返回的数据，包括权限
         const resData = {
           userName: username,
@@ -56,9 +62,14 @@ const LoginForm: FC<Props> = ({
         }
         setUserInfo(resData, setStoreData)
         history.push('/')
-    })
+      } else {
+        nameRef.current = username
+        setVisible(true)
       }
 
+    })
+  }
+  // verify_googleCode
   const FormView = (
     <Form className="login-form" name="login-form" onFinish={onFinish}>
       <Form.Item
@@ -101,9 +112,42 @@ const LoginForm: FC<Props> = ({
     </Form>
   )
 
+  const onVerifyFinish = async (values) => {
+    const res: any = await api.verify_googleCode({
+      code: Number(values.code)
+    })
+    if (res.code === 0) {
+      // 登录后返回的数据，包括权限
+      const resData = {
+        userName: nameRef.current,
+        token: res.data.token,
+        permission: res.data.c || []
+      }
+      setUserInfo(resData, setStoreData)
+      history.push('/')
+    }
+  }
+
   const floatColor = theme === 'default' ? '24,144,255' : '110,65,255'
   return (
     <div className="login-layout" id="login-layout">
+
+      <Modal
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        title="谷歌验证码"
+        footer={() => null}
+      >
+        <Form form={form} onFinish={onVerifyFinish}>
+          <Form.Item label="验证码" name="code">
+            <Input placeholder='请输入谷歌验证码' />
+          </Form.Item>
+          <Form.Item style={{ display: 'flex' }}>
+            <Button onClick={() => setVisible(false)} style={{ marginRight: 20 }}>取消</Button>
+            <Button htmlType='submit' type='primary'>确认</Button>
+          </Form.Item>
+        </Form>
+      </Modal>
       <ReactCanvasNest
         config={{
           pointColor: floatColor,