Skip to content

Commit

Permalink
feat: 实现微信登录功能 (#18)
Browse files Browse the repository at this point in the history 
* feat: 初步实现微信登录接口和基本流程

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

* feat: 实现微信登录

* feat: 实现微信登录与账号密码登录并列
  • Loading branch information
@oustr
oustr authored Mar 29, 2023
1 parent 195b20f commit 49cebcc
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 80 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
41 changes: 41 additions & 0 deletions src/pages/Login/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
190 changes: 115 additions & 75 deletions src/pages/Login/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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);
Expand All @@ -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;
26 changes: 23 additions & 3 deletions src/services/auth.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`, {
Expand All @@ -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 || {}),
Expand All @@ -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: {
Expand All @@ -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 || {}),
});
}
4 changes: 2 additions & 2 deletions src/services/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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'; //测试环境

0 comments on commit 49cebcc

Please sign in to comment.