Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 微信公众号扫码登陆完成

Browse Source
This commit is contained in:
landaiqing
2024-06-27 23:54:12 +08:00
parent 3628e95674
commit b1f78bb399
11 changed files with 343 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/captcha/api.ts
View File

@@ -7,7 +7,7 @@ import web from "@/utils/axios/web.ts";
*/
export const getCaptcha = () => {
return web.request({
url: "/ReactRotateCaptcha/get",
url: "/auth/ReactRotateCaptcha/get",
method: "get",
});
};
@@ -18,7 +18,7 @@ export const getCaptcha = () => {
*/
export const VerfiyCaptcha = (data: any) => {
return web.request({
url: "/ReactRotateCaptcha/verfiy",
url: "/auth/ReactRotateCaptcha/verfiy",
method: "post",
headers: {
"Content-Type": "application/json;charset=UTF-8",

9
src/api/oss/minio/index.ts
View File

@@ -7,12 +7,9 @@ import web from "@/utils/axios/web.ts";
*/
export const initMinio = (data: any) => {
return web.request({
url: "/oss/minio/init",
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
},
url: "/oss/oss/minio/init",
method: "post",
data: {
params: {
userId: data,
},
});
@@ -20,7 +17,7 @@ export const initMinio = (data: any) => {
export const getBaseInfo = (data: any) => {
return web.request({
url: "/oss/minio/getBaseInfo",
url: "/oss/oss/minio/getBaseInfo",
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",

69
src/api/user/index.ts
View File

@@ -2,22 +2,13 @@
import web from "@/utils/axios/web.ts";
/**
* 获取所有Minio信息
*/
export const getAllMinioInfo = () => {
return web.request({
url: "/oss/minio/getAllMinioInfo",
method: "get",
});
};
/**
* 第三方登录
* @param type
*/
export const oauthLogin = (type: string) => {
return web.request({
url: "/oauth/render/" + type,
url: "/auth/oauth/render/" + type,
method: "get",
});
};
@@ -28,7 +19,7 @@ export const oauthLogin = (type: string) => {
*/
export const getSms = (data: any) => {
return web.request({
url: "/sms/sendByTemplate/",
url: "/auth/sms/sendByTemplate/",
method: "post",
headers: {
"Content-Type": "application/json;charset=UTF-8",
@@ -43,7 +34,7 @@ export const getSms = (data: any) => {
*/
export const register = (data: API.PhoneRegisterRequest) => {
return web.request({
url: "/auth/user/register",
url: "/auth/auth/user/register",
method: "post",
data: data,
});
@@ -55,7 +46,7 @@ export const register = (data: API.PhoneRegisterRequest) => {
*/
export const login = (data: API.LoginRequest) => {
return web.request({
url: "/auth/user/login",
url: "/auth/auth/user/login",
method: "post",
data: data,
});
@@ -67,7 +58,7 @@ export const login = (data: API.LoginRequest) => {
*/
export const loginByPhone = (data: API.LoginByPhoneRequest) => {
return web.request({
url: "/auth/user/loginByPhone",
url: "/auth/auth/user/loginByPhone",
method: "post",
data: data,
});
@@ -78,8 +69,56 @@ export const loginByPhone = (data: API.LoginByPhoneRequest) => {
*/
export const findPassword = (data: API.findPasswordRequest) => {
return web.request({
url: "/auth/user/findPassword",
url: "/auth/auth/user/findPassword",
method: "post",
data: data,
});
};
/**
* 生成客户端id
*/
export const createClientId = () => {
return web.request({
url: "/auth/auth/user/createClientId",
method: "get",
});
};
/**
* 获取客户端id
* @param clientId
*/
export const getClientId = (clientId: string) => {
return web.request({
url: "/auth/auth/user/getClientId",
method: "post",
data: {
clientId: clientId,
},
});
};
/**
* 获取客户端token
* @param clientId
*/
export const getClientToken = (clientId: string) => {
return web.request({
url: "/auth/auth/user/getClientToken",
method: "post",
params: {
clientId: clientId,
},
});
};
/**
* 生成微信登录二维码
* @param clientId
*/
export const generateQRCode = (clientId: string) => {
return web.request({
url: "/wechat/wx/generateQRCode",
method: "get",
params: {
clientId: clientId,
},
});
};

1
src/assets/icons/oschina.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1719384377292" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285" width="200" height="200"><path d="M518.4 691.2c-99.2 0-182.4-64-185.6-185.6-6.4-112 92.8-188.8 188.8-192 108.8-3.2 176 121.6 176 121.6l281.6-102.4S864 32 547.2 32C252.8 35.2 48 236.8 48 512c0 243.2 192 489.6 489.6 476.8C867.2 976 979.2 688 979.2 688L688 592c3.2 3.2-57.6 99.2-169.6 99.2" fill="#3DAB53" p-id="2286"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

13
src/main.tsx
View File

@@ -1,6 +1,5 @@
/** @format */
import React from "react";
import ReactDOM from "react-dom/client";
import "./assets/styles/index.less";
import "virtual:svg-icons-register";
@@ -10,11 +9,9 @@ import { BrowserRouter } from "react-router-dom";
import App from "@/App.tsx";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<MobxProvider {...RootStore}>
<BrowserRouter>
<App />
</BrowserRouter>
</MobxProvider>
</React.StrictMode>,
<MobxProvider {...RootStore}>
<BrowserRouter>
<App />
</BrowserRouter>
</MobxProvider>,
);

88
src/views/User/Forget/index.tsx
View File

@@ -2,19 +2,21 @@
import { LockOutlined, MobileOutlined, SafetyOutlined, WechatOutlined } from "@ant-design/icons";
import { CaptFieldRef, ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
import { Alert, Button, ConfigProvider, Form, Image, message, Space, Tabs } from "antd";
import { useRef, useState } from "react";
import { Alert, Button, ConfigProvider, Form, Image, message, Space, Spin, Tabs } from "antd";
import { useEffect, useRef, useState } from "react";
import { TinyColor } from "@ctrl/tinycolor";
import logo from "@/assets/images/logo.png";
// import background from '@/assets/images/background.png'
import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg";
import styles from "./index.module.less";
import { observer } from "mobx-react";
import FooterComponent from "@/components/Footer";
import { findPassword, getSms } from "@/api/user";
import { createClientId, findPassword, generateQRCode, getClientToken, getSms } from "@/api/user";
import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
import { get, load } from "@/api/captcha";
// import useStore from '@/utils/store/useStore.tsx'
import { useNavigate } from "react-router-dom";
import useStore from "@/utils/store/useStore.tsx";
import { setStorage } from "@/utils/localStorage/config.ts";
import { TimerManager } from "timer-manager-lib";
type LoginType = "phone";
export default observer(() => {
@@ -24,6 +26,12 @@ export default observer(() => {
const findPasswordCaptcha = useRef<CaptchaInstance>(null);
const [loginType, setLoginType] = useState<LoginType>("phone");
const colors = ["#fc6076", "#ff9a44", "#ef9d43", "#e75516"];
const [QRCode, setQRCode] = useState<string>("");
const navigate = useNavigate();
const store = useStore("user");
const timerManager = new TimerManager();
const [loading, setLoading] = useState<boolean>(true);
const getHoverColors = (colors: string[]) =>
colors.map((color) => new TinyColor(color).lighten(5).toString());
const getActiveColors = (colors: string[]) =>
@@ -104,6 +112,50 @@ export default observer(() => {
},
];
async function wechatLogin() {
createClientId().then((res: any) => {
generateQRCode(res.data).then((response: any) => {
if (response.success) {
setQRCode(response.data.qrCodeUrl);
setLoading(false);
timerManager.add(() => {
getClientToken(res.data).then((result: any) => {
if (result.success) {
timerManager.clear();
store.setToken(result.data.tokenValue);
store.setUserId(result.data.loginId);
setStorage("token", result.data.tokenValue, 24 * 60 * 30);
setStorage("userId", result.data.loginId, 24 * 60 * 30);
message
.open({
content: "登录成功！",
type: "success",
})
.then();
if (store.getToken() !== null || store.getUserId() !== null) {
setTimeout(() => {
navigate("/main");
}, 2000);
}
}
});
}, 3000);
} else {
message
.open({
content: response.data,
type: "error",
})
.then();
}
});
});
}
useEffect(() => {
wechatLogin().then();
}, []);
return (
<div className={styles.container}>
<RotateCaptcha get={get} load={load} verify={smsVerify} limit={2} ref={smsCaptcha} />
@@ -120,23 +172,25 @@ export default observer(() => {
<Space align="center" className={styles.mp_code}>
<Space direction="vertical" align="center">
<span className={styles.mp_code_title}>微信扫码登录</span>
<Image
preview={false}
height={210}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={qrCode}
/>
<Spin spinning={loading}>
<Image
preview={false}
height={200}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={QRCode}
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
/>
</Spin>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={
<div>
<span>
微信扫码
<span className={styles.mp_tips}>
关注公众号
</span>
<span className={styles.mp_tips}>关注公众号</span>
</span>
<br />
登录更快更安全

91
src/views/User/Login/index.tsx
View File

@@ -9,6 +9,7 @@ import {
SafetyOutlined,
UserOutlined,
WechatOutlined,
WechatWorkOutlined,
} from "@ant-design/icons";
import {
CaptFieldRef,
@@ -25,23 +26,33 @@ import {
Image,
message,
Space,
Spin,
Tabs,
Tooltip,
} from "antd";
import { CSSProperties, useRef, useState } from "react";
import { CSSProperties, useEffect, useRef, useState } from "react";
import logo from "@/assets/images/logo.png";
import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg";
import styles from "./index.module.less";
import { observer } from "mobx-react";
import useStore from "@/utils/store/useStore.tsx";
import FooterComponent from "@/components/Footer";
import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
import { get, load } from "@/api/captcha/index.ts";
import { getSms, login, loginByPhone, oauthLogin } from "@/api/user";
import {
createClientId,
generateQRCode,
getClientToken,
getSms,
login,
loginByPhone,
oauthLogin,
} from "@/api/user";
import { TinyColor } from "@ctrl/tinycolor";
import { useNavigate } from "react-router-dom";
import { setStorage } from "@/utils/localStorage/config.ts";
import { TimerManager } from "timer-manager-lib";
type LoginType = "account" | "phone";
const iconStyles: CSSProperties = {
@@ -57,9 +68,12 @@ export default observer(() => {
const loginCaptcha = useRef<CaptchaInstance>(null);
const loginByPhoneCaptcha = useRef<CaptchaInstance>(null);
const captchaRef = useRef<CaptFieldRef | null | undefined>();
const [QRCode, setQRCode] = useState<string>("");
const navigate = useNavigate();
const store = useStore("user");
const colors = ["#40e495", "#30dd8a", "#2bb673"];
const timerManager = new TimerManager();
const [loading, setLoading] = useState<boolean>(true);
const getHoverColors = (colors: string[]) =>
colors.map((color) => new TinyColor(color).lighten(5).toString());
const getActiveColors = (colors: string[]) =>
@@ -180,7 +194,7 @@ export default observer(() => {
async function oAuthLogin(type: string) {
const res: any = await oauthLogin(type);
window.open(res.data);
window.open(res.data, "_self");
}
const [loginType, setLoginType] = useState<LoginType>("account");
@@ -197,6 +211,50 @@ export default observer(() => {
loginByPhoneCaptcha.current!.open();
}
async function wechatLogin() {
createClientId().then((res: any) => {
generateQRCode(res.data).then((response: any) => {
if (response.success) {
setQRCode(response.data.qrCodeUrl);
setLoading(false);
timerManager.add(() => {
getClientToken(res.data).then((result: any) => {
if (result.success) {
timerManager.clear();
store.setToken(result.data.tokenValue);
store.setUserId(result.data.loginId);
setStorage("token", result.data.tokenValue, 24 * 60 * 30);
setStorage("userId", result.data.loginId, 24 * 60 * 30);
message
.open({
content: "登录成功！",
type: "success",
})
.then();
if (store.getToken() !== null || store.getUserId() !== null) {
setTimeout(() => {
navigate("/main");
}, 2000);
}
}
});
}, 3000);
} else {
message
.open({
content: response.data,
type: "error",
})
.then();
}
});
});
}
useEffect(() => {
wechatLogin().then();
}, []);
return (
<div className={styles.container}>
<RotateCaptcha get={get} load={load} verify={smsVerify} limit={2} ref={smsCaptcha} />
@@ -220,23 +278,24 @@ export default observer(() => {
<Space align="center" className={styles.mp_code}>
<Space direction="vertical" align="center">
<span className={styles.mp_code_title}>微信扫码登录</span>
<Image
preview={false}
height={210}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={qrCode}
/>
<Spin spinning={loading}>
<Image
preview={false}
height={200}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={QRCode}
fallback="data:image/png;base64,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"
/>
</Spin>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={
<div>
<span>
微信扫码
<span className={styles.mp_tips}>
关注公众号
</span>
<span className={styles.mp_tips}>关注公众号</span>
</span>
<br />
登录更快更安全
@@ -461,7 +520,7 @@ export default observer(() => {
borderRadius: "50%",
}}>
<Tooltip title="企业微信登录" color={"green"}>
<WechatOutlined
<WechatWorkOutlined
style={{ ...iconStyles, color: "#08a327" }}
/>
</Tooltip>

78
src/views/User/Register/index.tsx
View File

@@ -8,19 +8,21 @@ import {
WechatOutlined,
} from "@ant-design/icons";
import { CaptFieldRef, ProFormCaptcha, ProFormText } from "@ant-design/pro-components";
import { Alert, Button, ConfigProvider, Form, Image, message, Space, Tabs } from "antd";
import { useRef, useState } from "react";
import { Alert, Button, ConfigProvider, Form, Image, message, Space, Spin, Tabs } from "antd";
import { useEffect, useRef, useState } from "react";
import logo from "@/assets/images/logo.png";
// import background from '@/assets/images/background.png'
import qrCode from "@/assets/images/login_qrcode-landaiqing.jpg";
import styles from "./index.module.less";
import { observer } from "mobx-react";
import FooterComponent from "@/components/Footer";
import { getSms, register } from "@/api/user";
import { createClientId, generateQRCode, getClientToken, getSms, register } from "@/api/user";
import { TinyColor } from "@ctrl/tinycolor";
import { get, load } from "@/api/captcha";
import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha";
import { useNavigate } from "react-router-dom";
import { setStorage } from "@/utils/localStorage/config.ts";
import useStore from "@/utils/store/useStore.tsx";
import { TimerManager } from "timer-manager-lib";
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = "phone";
@@ -29,8 +31,13 @@ export default observer(() => {
const registerCaptcha = useRef<CaptchaInstance>(null);
const smsCaptcha = useRef<CaptchaInstance>(null);
const captchaRef = useRef<CaptFieldRef | null | undefined>();
const [QRCode, setQRCode] = useState<string>("");
const navigate = useNavigate();
const store = useStore("user");
const colors = ["#6253E1", "#04BEFE"];
const timerManager = new TimerManager();
const [loading, setLoading] = useState<boolean>(true);
const getHoverColors = (colors: string[]) =>
colors.map((color) => new TinyColor(color).lighten(5).toString());
const getActiveColors = (colors: string[]) =>
@@ -115,6 +122,50 @@ export default observer(() => {
return res;
}
async function wechatLogin() {
createClientId().then((res: any) => {
generateQRCode(res.data).then((response: any) => {
if (response.success) {
setQRCode(response.data.qrCodeUrl);
setLoading(false);
timerManager.add(() => {
getClientToken(res.data).then((result: any) => {
if (result.success) {
timerManager.clear();
store.setToken(result.data.tokenValue);
store.setUserId(result.data.loginId);
setStorage("token", result.data.tokenValue, 24 * 60 * 30);
setStorage("userId", result.data.loginId, 24 * 60 * 30);
message
.open({
content: "登录成功！",
type: "success",
})
.then();
if (store.getToken() !== null || store.getUserId() !== null) {
setTimeout(() => {
navigate("/main");
}, 2000);
}
}
});
}, 3000);
} else {
message
.open({
content: response.data,
type: "error",
})
.then();
}
});
});
}
useEffect(() => {
wechatLogin().then();
}, []);
return (
<div className={styles.container}>
<RotateCaptcha get={get} load={load} verify={registerVerify} ref={registerCaptcha} />
@@ -125,14 +176,17 @@ export default observer(() => {
<Space align="center" className={styles.mp_code}>
<Space direction="vertical" align="center">
<span className={styles.mp_code_title}>微信扫码登录</span>
<Image
preview={false}
height={210}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={qrCode}
/>
<Spin spinning={loading}>
<Image
preview={false}
height={200}
width={200}
className={styles.mp_code_img}
// src={generateMpRegCodeData.data?.qrCodeUrl}
src={QRCode}
fallback="data:image/png;base64,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"
/>
</Spin>
<Alert
// message={(<span>微信扫码<span>关注公众号</span></span>)}
description={