feat: 对接登录接口

.eslintrc.js

@@ -12,6 +12,10 @@ module.exports = {
     'react/prop-types': 0,
     'spaced-comment': 'error',
     'array-bracket-spacing': [ 'error', 'always' ],
-    'object-curly-spacing': [ 'error', 'always' ]
+    'object-curly-spacing': [ 'error', 'always' ],
+    "react/self-closing-comp": [ "error", {
+      "component": true,
+      "html": true
+    } ]
   }
 }

config/proxy.js

@@ -7,8 +7,8 @@
  */
 export default {
   dev: {
-    '/cld2/': {
-      target: 'http://192.168.1.26:7001/',
+    '/api/': {
+      target: 'http://cld2.com',
       changeOrigin: true,
       pathRewrite: {
         '^': '',

mock/user.js

@@ -85,7 +85,7 @@ export default {
       address: 'Sidney No. 1 Lake Park',
     },
   ],
-  'POST /api/login/account': async (req, res) => {
+  'POST /api/login': async (req, res) => {
     const { password, userName, type } = req.body;
     await waitTime(2000);
 

src/basic

@@ -1 +1 @@
-Subproject commit 93f8370e417ff0ddd8d513677817d2cb429d835b
+Subproject commit 46d32cd94381f7c08795ba10f5c59a8c189f81f0

src/components/PopContactForm/index.jsx

@@ -17,22 +17,22 @@ import { connect } from 'dva'
 import SvgIcon from '@/components/SvgIcon'
 import styles from './index.less'
 
-const Popcontactform = (props) => {
+const Popcontactform = props => {
   // 浏览器实际宽度
-  const [ clientWidth, setClientWidth ] = useState(document.body.clientWidth * 0.75)
+  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
   useEffect(() => {
     const journallistData = () => {
       const { dispatch } = props
       dispatch({
         type: 'journallist/fetch'
-      })// 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
+      }) // 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
     }
     journallistData()
     window.addEventListener('resize', () => {
       setClientWidth(document.body.clientWidth * 0.7)
     })
     return () => {
-      window.removeEventListener('resize')
+      window.removeEventListener('resize', () => {})
     }
   }, [])
   const {
@@ -41,9 +41,9 @@ const Popcontactform = (props) => {
     onCreate,
     journalName: { list }
   } = props
-  const journallist = [ ...list ]
+  const journallist = [...list]
   // console.log(journallist)
-  const [ form ] = Form.useForm()
+  const [form] = Form.useForm()
   const { TabPane } = Tabs
   // function callback(key) {
   //   console.log(key)
@@ -115,7 +115,7 @@ const Popcontactform = (props) => {
                   <Col span={12}>
                     <h2>刘泽富</h2>
                   </Col>
-                  <Col span={12} className={[ 'text-right', styles.textMuted ]}>
+                  <Col span={12} className={['text-right', styles.textMuted]}>
                     陈特 创建于 2019年5月6日 14:55
                   </Col>
                 </Row>
@@ -123,19 +123,19 @@ const Popcontactform = (props) => {
                   <Form.Item
                     label="姓名"
                     name="clientname"
-                    rules={[ { required: false, message: '姓名' } ]}>
+                    rules={[{ required: false, message: '姓名' }]}>
                     <Input value="刘泽富" />
                   </Form.Item>
                   <Form.Item
                     label="联系人地区"
                     name="local"
-                    rules={[ { required: false, message: '地区' } ]}>
+                    rules={[{ required: false, message: '地区' }]}>
                     <Cascader options={residences} />
                   </Form.Item>
                   <Form.Item
                     label="客户名称"
                     name="companyname"
-                    rules={[ { required: false, message: '客户名称' } ]}>
+                    rules={[{ required: false, message: '客户名称' }]}>
                     <Input value="刘泽富" />
                   </Form.Item>
                   <Row gutter={16}>
@@ -143,7 +143,7 @@ const Popcontactform = (props) => {
                       <Form.Item
                         label="性别"
                         name=""
-                        rules={[ { required: false, message: '性别' } ]}>
+                        rules={[{ required: false, message: '性别' }]}>
                         <Select>
                           <Select.Option value="男">男</Select.Option>
                           <Select.Option value="女">女</Select.Option>
@@ -154,7 +154,7 @@ const Popcontactform = (props) => {
                       <Form.Item
                         label="昵称"
                         name=""
-                        rules={[ { required: false, message: '昵称' } ]}>
+                        rules={[{ required: false, message: '昵称' }]}>
                         <Input value="" />
                       </Form.Item>
                     </Col>
@@ -164,12 +164,12 @@ const Popcontactform = (props) => {
                       <Form.Item
                         label="手机"
                         name=""
-                        rules={[ { required: false, message: '手机' } ]}>
+                        rules={[{ required: false, message: '手机' }]}>
                         <Input value="" />
                       </Form.Item>
                     </Col>
                     <Col span={12}>
-                      <Form.Item label="QQ" name="" rules={[ { required: false, message: 'QQ' } ]}>
+                      <Form.Item label="QQ" name="" rules={[{ required: false, message: 'QQ' }]}>
                         <Input value="" />
                       </Form.Item>
                     </Col>
@@ -179,7 +179,7 @@ const Popcontactform = (props) => {
                       <Form.Item
                         label="电话"
                         name=""
-                        rules={[ { required: false, message: '电话' } ]}>
+                        rules={[{ required: false, message: '电话' }]}>
                         <Input value="" />
                       </Form.Item>
                     </Col>
@@ -187,7 +187,7 @@ const Popcontactform = (props) => {
                       <Form.Item
                         label="邮箱"
                         name=""
-                        rules={[ { required: false, message: '邮箱' } ]}>
+                        rules={[{ required: false, message: '邮箱' }]}>
                         <Input value="" />
                       </Form.Item>
                     </Col>
@@ -197,7 +197,7 @@ const Popcontactform = (props) => {
                       <Form.Item
                         label="传真"
                         name=""
-                        rules={[ { required: false, message: '传真' } ]}>
+                        rules={[{ required: false, message: '传真' }]}>
                         <Input value="" />
                       </Form.Item>
                     </Col>
@@ -208,7 +208,7 @@ const Popcontactform = (props) => {
                       <Form.Item
                         label="部门"
                         name=""
-                        rules={[ { required: false, message: '部门' } ]}>
+                        rules={[{ required: false, message: '部门' }]}>
                         <Input value="" />
                       </Form.Item>
                     </Col>
@@ -216,7 +216,7 @@ const Popcontactform = (props) => {
                       <Form.Item
                         label="职务"
                         name=""
-                        rules={[ { required: false, message: '职务' } ]}>
+                        rules={[{ required: false, message: '职务' }]}>
                         <Input value="" />
                       </Form.Item>
                     </Col>
@@ -224,34 +224,34 @@ const Popcontactform = (props) => {
                   <Form.Item
                     label="办公室"
                     name=""
-                    rules={[ { required: false, message: '办公室' } ]}>
+                    rules={[{ required: false, message: '办公室' }]}>
                     <Input value="" />
                   </Form.Item>
                   <Form.Item
                     label="联系人地址"
                     name=""
-                    rules={[ { required: false, message: '联系人地址' } ]}>
+                    rules={[{ required: false, message: '联系人地址' }]}>
                     <Input value="" />
                   </Form.Item>
                   <Form.Item
                     label="联系人乘车"
                     name=""
-                    rules={[ { required: false, message: '联系人乘车' } ]}>
+                    rules={[{ required: false, message: '联系人乘车' }]}>
                     <Input value="" />
                   </Form.Item>
                   <Form.Item
                     label="联系人地标"
                     name=""
-                    rules={[ { required: false, message: '联系人地标' } ]}>
+                    rules={[{ required: false, message: '联系人地标' }]}>
                     <Input value="" />
                   </Form.Item>
                   <Form.Item
                     label="联系人住宿"
                     name=""
-                    rules={[ { required: false, message: '联系人住宿' } ]}>
+                    rules={[{ required: false, message: '联系人住宿' }]}>
                     <Input value="" />
                   </Form.Item>
-                  <Form.Item label="备注" name="" rules={[ { required: false, message: '备注' } ]}>
+                  <Form.Item label="备注" name="" rules={[{ required: false, message: '备注' }]}>
                     <Input value="" />
                   </Form.Item>
                   <Form.Item label="个人标签">

src/global.less

@@ -70,3 +70,11 @@ ol {
     min-height: 100vh;
   }
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
+  -webkit-transition-delay: 111111s;
+}

src/models/login.js

@@ -1,25 +1,30 @@
 import { stringify } from 'querystring'
 import { history } from 'umi'
-import { fakeAccountLogin } from '@/services/login'
+import { apiLogin } from '@/services/login'
 import { setAuthority } from '@/utils/authority'
 import { getPageQuery } from '@/utils/utils'
 import { message } from 'antd'
+import consts from '@/consts'
+import { saveTokenId, saveUserAccount } from '@/basic/utils/common'
 
 const Model = {
   namespace: 'login',
   state: {
-    status: undefined
+    status: undefined,
+    userInfo: {}
   },
   effects: {
     *login({ payload }, { call, put }) {
       // 获取登录接口数据
-      const response = yield call(fakeAccountLogin, payload)
+      const response = yield call(apiLogin, payload)
       yield put({
         type: 'changeLoginStatus',
         payload: response
       }) // Login successfully
 
-      if (response.status === 'ok') {
+      if (response.code === consts.RET_CODE.SUCCESS) {
+        saveTokenId(response.data.token)
+        saveUserAccount(response.data.username)
         const urlParams = new URL(window.location.href)
         const params = getPageQuery()
         message.success('🎉 🎉 🎉  登录成功！')
@@ -59,8 +64,9 @@ const Model = {
   },
   reducers: {
     changeLoginStatus(state, { payload }) {
-      setAuthority(payload.currentAuthority)
-      return { ...state, status: payload.status, type: payload.type }
+      console.log(payload)
+      // setAuthority(payload.currentAuthority)
+      return { ...state, status: payload.code, userInfo: payload.data.userData }
     }
   }
 }

src/pages/user/login/index.jsx

@@ -13,6 +13,7 @@ import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-desi
 import { connect, useIntl, FormattedMessage } from 'umi'
 import { getFakeCaptcha } from '@/services/login'
 import styles from './index.less'
+import consts from '@/consts'
 
 const LoginMessage = ({ content }) => (
   <Alert
@@ -25,13 +26,13 @@ const LoginMessage = ({ content }) => (
   />
 )
 
-const Login = (props) => {
+const Login = props => {
   const { userLogin = {}, submitting } = props
-  const { status, type: loginType } = userLogin
+  const { status } = userLogin
   const [ type, setType ] = useState('account')
   const intl = useIntl()
 
-  const handleSubmit = (values) => {
+  const handleSubmit = values => {
     const { dispatch } = props
     dispatch({
       type: 'login/login',
@@ -55,10 +56,9 @@ const Login = (props) => {
             }
           }
         }}
-        onFinish={async (values) => {
+        onFinish={async values => {
           handleSubmit(values)
-        }}
-      >
+        }}>
         <Tabs activeKey={type} onChange={setType} className={styles.tabMargin}>
           <Tabs.TabPane
             key="account"
@@ -76,18 +76,18 @@ const Login = (props) => {
           /> */}
         </Tabs>
 
-        {status === 'error' && loginType === 'account' && !submitting && (
+        {status !== consts.RET_CODE.SUCCESS &&  !submitting && (
           <LoginMessage
             content={intl.formatMessage({
               id: 'pages.login.accountLogin.errorMessage',
-              defaultMessage: '账户或密码错误（admin/ant.design)'
+              defaultMessage: '账户或密码错误'
             })}
           />
         )}
         {type === 'account' && (
           <>
             <ProFormText
-              name="userName"
+              name="username"
               fieldProps={{
                 size: 'large',
                 prefix: <UserOutlined className={styles.prefixIcon} />
@@ -118,6 +118,7 @@ const Login = (props) => {
                 id: 'pages.login.password.placeholder',
                 defaultMessage: '密码: ant.design'
               })}
+              className="pi-bg-gray"
               rules={[
                 {
                   required: true,
@@ -133,7 +134,7 @@ const Login = (props) => {
           </>
         )}
 
-        {status === 'error' && loginType === 'mobile' && !submitting && (
+        {/* {status === 'error' && loginType === 'mobile' && !submitting && (
           <LoginMessage content="验证码错误" />
         )}
         {type === 'mobile' && (
@@ -215,20 +216,18 @@ const Login = (props) => {
               }}
             />
           </>
-        )}
+        )} */}
         <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>

src/services/login.js

@@ -1,20 +1,10 @@
 import request from '@/basic/utils/request'
 
-export async function fakeAccountLogin(params) {
-
-
- // 发送接口请求数据
-//  loginSafety
-return request('/api/login/account', {
-  method: 'POST',
-  data:params
-})
-
-  // return request('/cld2/login', {
-  //   method: 'POST',
-  //   data:params
-  // });
-}
-export async function getFakeCaptcha(mobile) {
-  return request(`/api/login/captcha?mobile=${mobile}`)
+/**
+ * 请求登录
+ * @param {*} params 登录所需参数
+ */
+export async function apiLogin(params) {
+  const data = await request.post('/api/login', { data: params })
+  return data
 }

src/utils/authority.js

@@ -25,9 +25,9 @@ export function getAuthority(str) {
 
   return authority
 }
-export function setAuthority(authority) {
-  const proAuthority = typeof authority === 'string' ? [ authority ] : authority
-  localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority)) // auto reload
+// export function setAuthority(authority) {
+//   const proAuthority = typeof authority === 'string' ? [ authority ] : authority
+//   localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority)) // auto reload
 
-  reloadAuthorized()
-}
+//   reloadAuthorized()
+// }