From 4ce065214a2a9e01846f971069d8fb63e5aa4261 Mon Sep 17 00:00:00 2001 From: landaiqing <3517283258@qq.com> Date: Wed, 29 May 2024 21:33:58 +0800 Subject: [PATCH] feat: update --- src/api/captcha/index.ts | 21 ++-- src/api/user/index.ts | 23 ++++ src/assets/icons/gitee.svg | 1 + src/components/LoadingPage/index.tsx | 4 +- src/router/guard.ts | 16 +-- src/types/user/user.d.ts | 40 ++++--- src/utils/axios/request.ts | 6 + src/utils/axios/web.ts | 9 +- src/views/User/Login/index.tsx | 160 +++++++++++++-------------- src/views/User/Register/index.tsx | 35 ++++-- vite.config.ts | 2 +- 11 files changed, 173 insertions(+), 144 deletions(-) create mode 100644 src/assets/icons/gitee.svg diff --git a/src/api/captcha/index.ts b/src/api/captcha/index.ts index 56f059c..d9ac3d1 100644 --- a/src/api/captcha/index.ts +++ b/src/api/captcha/index.ts @@ -1,5 +1,7 @@ -import type { TicketInfoType, TokenInfoType } from "react-rotate-captcha"; -import { getCaptcha, VerfiyCaptcha } from "@/api/captcha/api.ts"; +/** @format */ + +import type { TokenInfoType } from "react-rotate-captcha"; +import { getCaptcha } from "@/api/captcha/api.ts"; export type ActionType = { code: 0 | 1; @@ -36,11 +38,10 @@ export function sleep(time: number) { }); } -export async function verify(token: string, deg: number): Promise { - const data: any = { - token: token, - deg: deg, - }; - const res: any = await VerfiyCaptcha(data); - return res; -} +// export async function verify(token: string, deg: number): Promise { +// const data: any = { +// token: token, +// deg: deg, +// }; +// return await VerfiyCaptcha(data); +// } diff --git a/src/api/user/index.ts b/src/api/user/index.ts index 6ba626a..1afb191 100644 --- a/src/api/user/index.ts +++ b/src/api/user/index.ts @@ -21,3 +21,26 @@ export const oauthLogin = (type: string) => { method: "get", }); }; + +/** + * 获取短信验证码 + * @param phone + */ +export const getSms = (phone: string) => { + return web.request({ + url: "/sms/sendByTemplate/" + phone, + method: "post", + }); +}; + +/** + * 注册 + * @param data + */ +export const register = (data: API.PhoneRegisterRequest) => { + return web.request({ + url: "/auth/user/register", + method: "post", + data: data, + }); +}; diff --git a/src/assets/icons/gitee.svg b/src/assets/icons/gitee.svg new file mode 100644 index 0000000..fe13a4e --- /dev/null +++ b/src/assets/icons/gitee.svg @@ -0,0 +1 @@ + diff --git a/src/components/LoadingPage/index.tsx b/src/components/LoadingPage/index.tsx index 3805be0..2e929bf 100644 --- a/src/components/LoadingPage/index.tsx +++ b/src/components/LoadingPage/index.tsx @@ -5,7 +5,7 @@ import "./index.less"; import { useNavigate, useSearchParams } from "react-router-dom"; import useStore from "@/utils/store/useStore.tsx"; import { observer } from "mobx-react"; -import localforage from "localforage"; +import { setStorage } from "@/utils/localStorage/config.ts"; const LoadingPage = () => { const [search] = useSearchParams(); @@ -15,7 +15,7 @@ const LoadingPage = () => { const store = useStore("user"); store.setToken(token); store.setUserId(userId); - localforage.setItem("token", token).then(); + setStorage("token", token, 24 * 60 * 30); useEffect(() => { document.body.classList.add("loading-body"); if (store.getToken() !== null && store.getUserId() !== null) { diff --git a/src/router/guard.ts b/src/router/guard.ts index 1d2fac6..521b3c8 100644 --- a/src/router/guard.ts +++ b/src/router/guard.ts @@ -10,7 +10,7 @@ import { useNavigate, useRoutes, } from "react-router-dom"; -import localforage from "localforage"; +import { getStorageFromKey } from "@/utils/localStorage/config.ts"; //递归查询对应的路由 export function searchRouteDetail(path: string, routes: RouteObject[]): RouteObject | null { @@ -28,21 +28,21 @@ async function guard(location: Location, navigate: NavigateFunction, routes: Rou const { pathname } = location; //找到对应的路由信息 - const routedetail: RouteObject | null = searchRouteDetail(pathname, routes); + const routerDetail: RouteObject | null = searchRouteDetail(pathname, routes); //没有找到路由,跳转404 - if (!routedetail) { + if (!routerDetail) { navigate("/404"); return false; } //如果需要权限验证 if ( - routedetail.path !== "/login" && - routedetail.path !== "/register" && - routedetail.path !== "/" && - routedetail.path !== "/404" + routerDetail.path !== "/login" && + routerDetail.path !== "/register" && + routerDetail.path !== "/" && + routerDetail.path !== "/404" ) { - const token: string | null = await localforage.getItem("token"); + const token: string | null = getStorageFromKey("token"); if (!token) { message.warning("请先登录!").then(); navigate("/login"); diff --git a/src/types/user/user.d.ts b/src/types/user/user.d.ts index acb5dc6..efb39f9 100644 --- a/src/types/user/user.d.ts +++ b/src/types/user/user.d.ts @@ -1,7 +1,13 @@ -// @ts-ignore +/** @format */ /* eslint-disable */ declare namespace API { + type PhoneRegisterRequest = { + phone?: string; + password?: string; + confirmPassword?: string; + activeCode?: string; + }; // type ApiResponse = { // success?: boolean; // code?: number; @@ -124,23 +130,23 @@ declare namespace API { // type?: NoticeIconItemType; // }; - type GenerateMpRegCode = { - data?: { - regCode?: string; - qrCodeUrl?: string; - expireSeconds?: number; - ticket?: string; - url?: string; - }; - } + // type GenerateMpRegCode = { + // data?: { + // regCode?: string; + // qrCodeUrl?: string; + // expireSeconds?: number; + // ticket?: string; + // url?: string; + // }; + // } // type GetClientId = { // data?: string; // } - type GenerateBase64Code = { - data?: string; - } + // type GenerateBase64Code = { + // data?: string; + // } // type GetClientToken = { // data?: { @@ -150,14 +156,6 @@ declare namespace API { // }; // } - type PhoneRegisterRequest = { - clientId?: string; - phone?: string; - password?: string; - confirmPassword?: string; - smsCode?: number; - } - // type PhoneRegisterResponse = ResponseStructure & { // data?: number; // } diff --git a/src/utils/axios/request.ts b/src/utils/axios/request.ts index e001dde..7596353 100644 --- a/src/utils/axios/request.ts +++ b/src/utils/axios/request.ts @@ -2,6 +2,7 @@ import axios, { AxiosInstance, AxiosRequestConfig } from "axios"; import { message } from "antd"; +import { getStorageFromKey } from "@/utils/localStorage/config.ts"; class Request { private instance: AxiosInstance | undefined; @@ -11,6 +12,11 @@ class Request { // 全局请求拦截 this.instance.interceptors.request.use( (config) => { + const token: string | null = getStorageFromKey("token"); + if (token) { + config.headers.Authorization = `schisandra ${token}`; + } + // if (config.method == "post") { // config.data = EncryptData(JSON.stringify(config.data)); // } diff --git a/src/utils/axios/web.ts b/src/utils/axios/web.ts index a800320..3b73bd0 100644 --- a/src/utils/axios/web.ts +++ b/src/utils/axios/web.ts @@ -1,17 +1,10 @@ /** @format */ import Request from "./request"; -import localforage from "localforage"; -async function getToken() { - return await localforage.getItem("token"); -} -const token = await getToken(); const web: Request = new Request({ baseURL: import.meta.env.VITE_APP_BASE_API, - headers: { - token: import.meta.env.VITE_APP_TOKEN_KEY + " " + token, - }, + timeout: 5000, }); export default web; diff --git a/src/views/User/Login/index.tsx b/src/views/User/Login/index.tsx index 60f69a6..22733c2 100644 --- a/src/views/User/Login/index.tsx +++ b/src/views/User/Login/index.tsx @@ -9,17 +9,23 @@ import { UserOutlined, WechatOutlined, } from "@ant-design/icons"; -import { ProFormCaptcha, ProFormCheckbox, ProFormText } from "@ant-design/pro-components"; -import { Alert, Button, Divider, Form, Image, message, Space, Tabs } from "antd"; -import { CSSProperties, useRef, useState } from "react"; +import { + CaptFieldRef, + ProFormCaptcha, + ProFormCheckbox, + ProFormText, +} from "@ant-design/pro-components"; +import { Alert, Button, Divider, Form, Image, message, Space, Tabs, Tooltip } from "antd"; +import { CSSProperties, useEffect, useRef, useState } from "react"; import logo from "@/assets/icons/schisandra.svg"; 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 RotateCaptcha, { CaptchaInstance } from "react-rotate-captcha"; -import { get, load, verify } from "@/api/captcha/index.ts"; -import { oauthLogin } from "@/api/user"; +import RotateCaptcha, { CaptchaInstance, type TicketInfoType } from "react-rotate-captcha"; +import { get, load } from "@/api/captcha/index.ts"; +import { getSms, oauthLogin } from "@/api/user"; +import { VerfiyCaptcha } from "@/api/captcha/api.ts"; // import useStore from '@/utils/store/useStore.tsx' type LoginType = "account" | "phone"; @@ -33,6 +39,17 @@ const iconStyles: CSSProperties = { export default observer(() => { const [form] = Form.useForm(); const captcha = useRef(null); + const captchaRef = useRef(); + + async function verify(token: string, deg: number): Promise { + const data: any = { + token: token, + deg: deg, + }; + const res = await VerfiyCaptcha(data); + return res; + } + const items = [ { label: ( @@ -56,15 +73,21 @@ export default observer(() => { async function oAuthLogin(type: string) { const res: any = await oauthLogin(type); - console.log(res); - window.location.href = res.data; + window.open(res.data, "_blank"); } const [loginType, setLoginType] = useState("account"); + async function openCaptcha() { + captcha.current!.open(); + } + const onSubmit = async (formData: object) => { - console.log(formData); + openCaptcha().then(() => { + console.log(formData); + }); }; + useEffect(() => {}, []); return (
@@ -137,7 +160,7 @@ export default observer(() => { size: "large", prefix: , }} - placeholder={"请输入账号/邮箱/电话号码"} + placeholder={"请输入邮箱或电话号码"} rules={[ { required: true, @@ -165,26 +188,6 @@ export default observer(() => { }, ]} /> - {/*,*/} - {/* autoComplete: 'off',*/} - {/* }}*/} - {/* placeholder='请输入图形验证码'*/} - {/* rules={[*/} - {/* {*/} - {/* required: true,*/} - {/* message: '请输入图形验证码!',*/} - {/* },*/} - {/* {*/} - {/* pattern: /^[a-zA-Z0-9]{5}$/,*/} - {/* message: '图形验证码格式不正确',*/} - {/* },*/} - {/* ]}*/} - {/*/>*/} )} {loginType === "phone" && ( @@ -208,26 +211,6 @@ export default observer(() => { }, ]} /> - {/*,*/} - {/* autoComplete: 'off',*/} - {/* }}*/} - {/* placeholder='请输入图形验证码'*/} - {/* rules={[*/} - {/* {*/} - {/* required: true,*/} - {/* message: '请输入图形验证码!',*/} - {/* },*/} - {/* {*/} - {/* pattern: /^[a-zA-Z0-9]{5}$/,*/} - {/* message: '图形验证码格式不正确',*/} - {/* },*/} - {/* ]}*/} - {/*/>*/} { size: "large", }} placeholder={"请输入验证码"} - captchaTextRender={(timing, count) => { + captchaTextRender={(timing: boolean) => { if (timing) { - return `${count} ${"获取验证码"}`; + // return `${count} ${"获取验证码"}`; + return `${"获取验证码"}`; } return "获取验证码"; }} name="captcha" + phoneName={"mobile"} rules={[ { required: true, message: "请输入验证码!", }, ]} - onGetCaptcha={async () => { - captcha.current!.open(); - message.success("获取验证码成功!验证码为:1234"); + fieldRef={captchaRef} + countDown={300} + onGetCaptcha={async (mobile: string) => { + const res: any = await getSms(mobile); + if (res && res.success) { + message.success(res.data, 3); + } else { + message.warning(res.data, 3); + } }} /> @@ -261,7 +252,7 @@ export default observer(() => { 自动登录 - 忘记密码 + 忘记密码