From 49cebcc7ce61ef42b3f66c0023bf194d5f2e2719 Mon Sep 17 00:00:00 2001
From: oustr <111119927+oustr@users.noreply.github.com>
Date: Thu, 30 Mar 2023 00:31:58 +1100
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=BE=AE=E4=BF=A1?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=20(#18)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 初步实现微信登录接口和基本流程

* feat: 实现登陆失败跳转回登录页面

* feat: 实现微信登录

* feat: 实现微信登录与账号密码登录并列
---
 package.json               |   1 +
 src/pages/Login/index.less |  41 ++++++++
 src/pages/Login/index.tsx  | 190 ++++++++++++++++++++++---------------
 src/services/auth.ts       |  26 ++++-
 src/services/index.ts      |   4 +-
 5 files changed, 182 insertions(+), 80 deletions(-)

diff --git a/package.json b/package.json
index 22d1ae0..c579601 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "lint-staged": "^10.0.0",
     "mockjs": "^1.1.0",
     "prettier": "^2.7.1",
+    "query-string": "^8.1.0",
     "release-it": "^15.6.0",
     "swagger-ui-dist": "^4.14.2",
     "typescript": "^4.8.4",
diff --git a/src/pages/Login/index.less b/src/pages/Login/index.less
index 40cda55..7502a1f 100644
--- a/src/pages/Login/index.less
+++ b/src/pages/Login/index.less
@@ -41,3 +41,44 @@
     color: @primary-color;
   }
 }
+
+.main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+  margin-top: 6vh;
+
+  .title {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    font-size: 32px;
+    transform: translateX(-6px);
+
+    img {
+      width: 60px;
+      height: 60px;
+      margin-right: 8px;
+      border-radius: 30px;
+    }
+  }
+
+  .weixinLoginFrame {
+    box-sizing: border-box;
+    width: 390px;
+    text-align: center;
+
+    .link {
+      line-height: 40px;
+    }
+  }
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index f9c88a6..cc6837e 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,15 +1,15 @@
 import Footer from '@/components/Footer';
-import { login } from '@/services/auth';
+import { weixinLogin, accountLogin } from '@/services/auth';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { LoginForm, ProFormCheckbox, ProFormText } from '@ant-design/pro-components';
 import { history, useModel } from '@umijs/max';
 import { message, Tabs } from 'antd';
 import { flushSync } from 'react-dom';
+import queryString from 'query-string';
 import styles from './index.less';
 
 const Login: React.FC = () => {
   const { initialState, setInitialState } = useModel('@@initialState');
-
   const fetchUserInfo = async () => {
     const userInfo = await initialState?.fetchUserInfo?.();
     if (userInfo) {
@@ -21,12 +21,20 @@ const Login: React.FC = () => {
       });
     }
   };
-
-  const handleSubmit = async (values: API.LoginParams) => {
+  const handleSubmit = async (type: string, data: any) => {
     try {
       // 登录
-      const msg = await login({ ...values });
+      let msg;
+      if (type === 'weixin') {
+        msg = await weixinLogin(data);
+      } else if (type === 'account') {
+        msg = await accountLogin(data);
+      } else {
+        return;
+      }
+      // @ts-ignore
       if (msg.code === 0) {
+        // @ts-ignore
         localStorage.setItem('accessToken', `${msg.accessToken}`);
         const defaultLoginSuccessMessage = '登录成功！';
         message.success(defaultLoginSuccessMessage);
@@ -35,84 +43,116 @@ const Login: React.FC = () => {
         history.push(urlParams.get('redirect') || '/');
         return;
       }
-      console.log(msg);
     } catch (error) {
       const defaultLoginFailureMessage = '登录失败，请重试！';
-      console.log(error);
       message.error(defaultLoginFailureMessage);
+      history.replace({
+        pathname: '/',
+      });
     }
   };
 
-  return (
-    <div className={styles.container}>
-      <div className={styles.box}></div>
-      <div className={styles.content}>
-        <LoginForm
-          logo={<img alt="logo" src="https://static.xhpolaris.com/cat_world.jpg" />}
-          title="Meowchat 管理面板"
-          onFinish={async (values) => {
-            await handleSubmit(values as API.LoginParams);
-          }}
-        >
-          <Tabs
-            centered
-            items={[
-              {
-                key: 'account',
-                label: '账户密码登录',
-              },
-            ]}
-          />
-
-          <ProFormText
-            name="authId"
-            fieldProps={{
-              size: 'large',
-              prefix: <UserOutlined className={styles.prefixIcon} />,
-            }}
-            placeholder={'用户名'}
-            rules={[
-              {
-                required: true,
-                message: '请输入用户名!',
-              },
-            ]}
-          />
-          <ProFormText.Password
-            name="password"
-            fieldProps={{
-              size: 'large',
-              prefix: <LockOutlined className={styles.prefixIcon} />,
-            }}
-            placeholder={'密码'}
-            rules={[
-              {
-                required: true,
-                message: '请输入密码！',
-              },
-            ]}
-          />
-          <div
-            style={{
-              marginBottom: 24,
-            }}
-          >
-            <ProFormCheckbox noStyle name="autoLogin">
-              自动登录
-            </ProFormCheckbox>
-            <a
-              style={{
-                float: 'right',
-              }}
-            >
-              忘记密码
-            </a>
+  const code: string = queryString.parse(location.search).code as string;
+  if (code) {
+    handleSubmit('weixin', code);
+    return <div className={styles.center}>登陆中...</div>;
+  } else {
+    return (
+      <div className={styles.container}>
+        <div className={styles.box} />
+        <div className={styles.content}>
+          <div className={styles.main}>
+            <div className={styles.title}>
+              <img alt="logo" src="https://static.xhpolaris.com/cat_world.jpg" />
+              <span>Meowchat 管理面板</span>
+            </div>
+            <Tabs
+              centered
+              items={[
+                {
+                  key: 'weixin',
+                  label: '微信登录',
+                  children: (
+                    <>
+                      <div className={styles.weixinLoginFrame}>
+                        <a
+                          href={
+                            'https://open.weixin.qq.com/connect/qrconnect?appid=wx40ab73e6ebd6e636&redirect_uri=https://manager.meowchat.cn/login&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect'
+                          }
+                          className={styles.link}
+                        >
+                          点击进入微信登录
+                        </a>
+                      </div>
+                    </>
+                  ),
+                },
+                {
+                  key: 'account',
+                  label: '账户密码登录',
+                  children: (
+                    <>
+                      <LoginForm
+                        onFinish={async (values) => {
+                          await handleSubmit('account', values as API.LoginParams);
+                        }}
+                      >
+                        <ProFormText
+                          name="authId"
+                          fieldProps={{
+                            size: 'large',
+                            prefix: <UserOutlined className={styles.prefixIcon} />,
+                          }}
+                          placeholder={'用户名'}
+                          rules={[
+                            {
+                              required: true,
+                              message: '请输入用户名!',
+                            },
+                          ]}
+                        />
+                        <ProFormText.Password
+                          name="password"
+                          fieldProps={{
+                            size: 'large',
+                            prefix: <LockOutlined className={styles.prefixIcon} />,
+                          }}
+                          placeholder={'密码'}
+                          rules={[
+                            {
+                              required: true,
+                              message: '请输入密码！',
+                            },
+                          ]}
+                        />
+                        <div
+                          style={{
+                            marginBottom: 24,
+                          }}
+                        >
+                          <ProFormCheckbox noStyle name="autoLogin">
+                            自动登录
+                          </ProFormCheckbox>
+                          <a
+                            style={{
+                              float: 'right',
+                            }}
+                          >
+                            忘记密码
+                          </a>
+                        </div>
+                      </LoginForm>
+                    </>
+                  ),
+                },
+              ]}
+            />
           </div>
-        </LoginForm>
+        </div>
+        <Footer />
       </div>
-      <Footer />
-    </div>
-  );
+    );
+  }
 };
 
 export default Login;
diff --git a/src/services/auth.ts b/src/services/auth.ts
index 20481c6..b242b3f 100644
--- a/src/services/auth.ts
+++ b/src/services/auth.ts
@@ -6,7 +6,7 @@ import { DEFAULT_URL } from '.';
  * @param params
  * @returns
  */
-export async function currentUser(options?: { [key: string]: any }) {
+export async function currentUser(options?: Record<string, any>) {
   return request<{
     user: API.CurrentUser;
   }>(`${DEFAULT_URL}/user/get_user_info`, {
@@ -20,7 +20,7 @@ export async function currentUser(options?: { [key: string]: any }) {
  * @param params
  * @returns
  */
-export async function currentUserAccess(options?: { [key: string]: any }) {
+export async function currentUserAccess(options?: Record<string, any>) {
   return request(`${DEFAULT_URL}/role/get_user_roles`, {
     method: 'GET',
     ...(options || {}),
@@ -32,7 +32,7 @@ export async function currentUserAccess(options?: { [key: string]: any }) {
  * @param params
  * @returns
  */
-export async function login(body: API.LoginParams, options?: { [key: string]: any }) {
+export async function accountLogin(body: API.LoginParams, options?: Record<string, any>) {
   return request<API.LoginResult>(`${DEFAULT_URL}/auth/sign_in`, {
     method: 'POST',
     data: {
@@ -54,3 +54,23 @@ export async function outLogin() {
     success: true,
   };
 }
+
+/**
+ * 微信登录接口
+ * code是微信登录扫二维码后微信官方返回的code
+ */
+export async function weixinLogin(code: string, options?: Record<string, any>) {
+  return request<{
+    accessToken: any;
+    code: number;
+    user: API.CurrentUser;
+  }>(`${DEFAULT_URL}/auth/sign_in`, {
+    method: 'POST',
+    data: {
+      authType: 'wechat',
+      params: [code, 'manager'],
+      authId: 'authId', //这个随便填 没用的
+    },
+    ...(options || {}),
+  });
+}
diff --git a/src/services/index.ts b/src/services/index.ts
index 8acdc4a..727eef2 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -1,2 +1,2 @@
-export const DEFAULT_URL = 'https://meowchat.xhpolaris.com';
-// export const DEFAULT_URL = 'http://test.meowchat.cn'; //测试环境
+// export const DEFAULT_URL = 'https://meowchat.xhpolaris.com';
+export const DEFAULT_URL = 'http://test.meowchat.cn'; //测试环境