diff --git a/src/api/system.ts b/src/api/system.ts index 233aa16..0ff970c 100644 --- a/src/api/system.ts +++ b/src/api/system.ts @@ -3,3 +3,7 @@ import client from "./internal/httpClient"; export function getImageCaptcha() { return client.get("/backend/v1/system/image-captcha", {}); } + +export function getSystemConfig() { + return client.get("/backend/v1/system/config", {}); +} \ No newline at end of file diff --git a/src/pages/init/index.tsx b/src/pages/init/index.tsx index 76f9f0d..cf99b4f 100644 --- a/src/pages/init/index.tsx +++ b/src/pages/init/index.tsx @@ -1,9 +1,14 @@ import { useDispatch } from "react-redux"; import { Outlet } from "react-router-dom"; import { loginAction } from "../../store/user/loginUserSlice"; +import { + SystemConfigStoreInterface, + saveConfigAction, +} from "../../store/system/systemConfigSlice"; interface Props { - loginData: any | null; + loginData?: any; + configData?: any; } const InitPage = (props: Props) => { @@ -12,6 +17,19 @@ const InitPage = (props: Props) => { dispatch(loginAction(props.loginData)); } + if (props.configData) { + let config: SystemConfigStoreInterface = { + systemName: props.configData["system.name"], + systemLogo: props.configData["system.logo"], + systemApiUrl: props.configData["system.api_url"], + systemPcUrl: props.configData["system.pc_url"], + systemH5Url: props.configData["system.h5_url"], + memberDefaultAvatar: props.configData["member.default_avatar"], + courseDefaultThumbs: props.configData["default.course_thumbs"], + }; + dispatch(saveConfigAction(config)); + } + return ( <> diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 55dfb3c..a52dff2 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -1,7 +1,7 @@ -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; import styles from "./index.module.less"; import { Spin, Input, Button, message } from "antd"; -import { login, system } from "../../api/index"; +import { login as loginApi, system } from "../../api/index"; import { setToken } from "../../utils/index"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; @@ -9,6 +9,10 @@ import banner from "../../assets/images/login/banner.png"; import icon from "../../assets/images/login/icon.png"; import "./login.less"; import { loginAction } from "../../store/user/loginUserSlice"; +import { + SystemConfigStoreInterface, + saveConfigAction, +} from "../../store/system/systemConfigSlice"; const LoginPage = () => { const dispatch = useDispatch(); @@ -22,6 +26,7 @@ const LoginPage = () => { const [captchaLoading, setCaptchaLoading] = useState(true); const fetchImageCaptcha = () => { + setCaptchaVal(""); setCaptchaLoading(true); system.getImageCaptcha().then((res: any) => { setImage(res.data.image); @@ -30,7 +35,7 @@ const LoginPage = () => { }); }; - const loginSubmit = (e: any) => { + const loginSubmit = async () => { if (!email) { message.error("请输入管理员邮箱账号"); return; @@ -43,47 +48,60 @@ const LoginPage = () => { message.error("请输入图形验证码"); return; } - if (captchaVal.length < 4) { + if (captchaVal.length !== 4) { message.error("图形验证码错误"); return; } - if (loading) { - return; - } - handleSubmit(); + await handleSubmit(); }; - const handleSubmit = () => { + const handleSubmit = async () => { if (loading) { return; } setLoading(true); - login - .login(email, password, captchaKey, captchaVal) - .then((res: any) => { - const token = res.data.token; - setToken(token); - getUser(); - }) - .catch((e) => { - setLoading(false); - setCaptchaVal(""); - fetchImageCaptcha(); - }); + try { + let res: any = await loginApi.login( + email, + password, + captchaKey, + captchaVal + ); + setToken(res.data.token); //将token写入本地 + await getSystemConfig(); //获取系统配置并写入store + await getUser(); //获取登录用户的信息并写入store + + navigate("/"); + } catch (e) { + message.error("登录出现错误"); + console.error("错误信息", e); + setLoading(false); + fetchImageCaptcha(); //刷新图形验证码 + } }; - const getUser = () => { - login.getUser().then((res: any) => { - const data = res.data; - dispatch(loginAction(data)); - setLoading(false); - navigate("/"); - }); + const getUser = async () => { + let res: any = await loginApi.getUser(); + dispatch(loginAction(res.data)); + }; + + const getSystemConfig = async () => { + let res: any = await system.getSystemConfig(); + let data: SystemConfigStoreInterface = { + systemName: res.data["system.name"], + systemLogo: res.data["system.logo"], + systemApiUrl: res.data["system.api_url"], + systemPcUrl: res.data["system.pc_url"], + systemH5Url: res.data["system.h5_url"], + memberDefaultAvatar: res.data["member.default_avatar"], + courseDefaultThumbs: res.data["default.course_thumbs"], + }; + dispatch(saveConfigAction(data)); }; const keyUp = (e: any) => { if (e.keyCode === 13) { - loginSubmit(e); + loginSubmit(); } }; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index e27405b..42e9f92 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,6 +1,6 @@ import { lazy } from "react"; import { RouteObject } from "react-router-dom"; -import { login } from "../api"; +import { login, system } from "../api"; import InitPage from "../pages/init"; import { getToken } from "../utils"; @@ -23,52 +23,34 @@ import DepartmentPage from "../pages/department"; import TestPage from "../pages/test"; import ErrorPage from "../pages/error"; -// 异步加载页面 // const LoginPage = lazy(() => import("../pages/login")); -// const HomePage = lazy(() => import("../pages/home")); -// const DashboardPage = lazy(() => import("../pages/dashboard")); -// const ErrorPage = lazy(() => import("../pages/error")); -// const CoursePage = lazy(() => import("../pages/course")); -// const TestPage = lazy(() => import("../pages/test")); -// const MemberPage = lazy(() => import("../pages/member")); -// const MemberImportPage = lazy(() => import("../pages/member/import")); -// const SystemAdministratorPage = lazy( -// () => import("../pages/system/administrator") -// ); -// const SystemAdminrolesPage = lazy(() => import("../pages/system/adminroles")); -// const DepartmentPage = lazy(() => import("../pages/department")); -// const ChangePasswordPage = lazy(() => import("../pages/change-password")); -// const ResourceImagesPage = lazy(() => import("../pages/resource/images")); -// const ResourceCategoryPage = lazy( -// () => import("../pages/resource/resource-category") -// ); -// const ResourceVideosPage = lazy(() => import("../pages/resource/videos")); -// const SystemConfigPage = lazy(() => import("../pages/system/config")); let RootPage: any = null; if (getToken()) { RootPage = lazy(async () => { - return new Promise((resolve) => { - let userLoginToken = getToken(); - if (!userLoginToken) { + return new Promise(async (resolve) => { + try { + let configRes: any = await system.getSystemConfig(); + let userRes: any = await login.getUser(); + resolve({ - default: InitPage, + default: ( + + ), + }); + } catch (e) { + console.error("系统初始化失败", e); + resolve({ + default: , }); - return; } - login.getUser().then((res: any) => { - resolve({ - default: , - }); - }); - // todo token过期处理 }); }); } else { if (window.location.pathname !== "/login") { window.location.href = "/login"; } - RootPage = ; + RootPage = ; } const routes: RouteObject[] = [ diff --git a/src/store/system/systemConfigSlice.ts b/src/store/system/systemConfigSlice.ts index eab6dfe..300a1b9 100644 --- a/src/store/system/systemConfigSlice.ts +++ b/src/store/system/systemConfigSlice.ts @@ -1,25 +1,19 @@ import { createSlice } from "@reduxjs/toolkit"; type SystemConfigStoreInterface = { - systemApiUrl: string; - systemPcUrl: string; - systemH5Url: string; - systemLogo: string; - systemName: string; -}; - -let defaultValue: SystemConfigStoreInterface = { - systemApiUrl: "", - systemPcUrl: "", - systemH5Url: "", - systemLogo: "", - systemName: "", + systemApiUrl?: string; + systemPcUrl?: string; + systemH5Url?: string; + systemLogo?: string; + systemName?: string; + memberDefaultAvatar?: string; + courseDefaultThumbs?: string[]; }; const systemConfigSlice = createSlice({ name: "systemConfig", initialState: { - value: defaultValue, + value: {}, }, reducers: { saveConfigAction(stage, e) {