This commit is contained in:
禺狨 2023-04-11 16:11:36 +08:00
commit f728ded148
5 changed files with 93 additions and 77 deletions

View File

@ -3,3 +3,7 @@ import client from "./internal/httpClient";
export function getImageCaptcha() { export function getImageCaptcha() {
return client.get("/backend/v1/system/image-captcha", {}); return client.get("/backend/v1/system/image-captcha", {});
} }
export function getSystemConfig() {
return client.get("/backend/v1/system/config", {});
}

View File

@ -1,9 +1,14 @@
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import { loginAction } from "../../store/user/loginUserSlice"; import { loginAction } from "../../store/user/loginUserSlice";
import {
SystemConfigStoreInterface,
saveConfigAction,
} from "../../store/system/systemConfigSlice";
interface Props { interface Props {
loginData: any | null; loginData?: any;
configData?: any;
} }
const InitPage = (props: Props) => { const InitPage = (props: Props) => {
@ -12,6 +17,19 @@ const InitPage = (props: Props) => {
dispatch(loginAction(props.loginData)); 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 ( return (
<> <>
<Outlet /> <Outlet />

View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import styles from "./index.module.less"; import styles from "./index.module.less";
import { Spin, Input, Button, message } from "antd"; 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 { setToken } from "../../utils/index";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom"; 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 icon from "../../assets/images/login/icon.png";
import "./login.less"; import "./login.less";
import { loginAction } from "../../store/user/loginUserSlice"; import { loginAction } from "../../store/user/loginUserSlice";
import {
SystemConfigStoreInterface,
saveConfigAction,
} from "../../store/system/systemConfigSlice";
const LoginPage = () => { const LoginPage = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -22,6 +26,7 @@ const LoginPage = () => {
const [captchaLoading, setCaptchaLoading] = useState(true); const [captchaLoading, setCaptchaLoading] = useState(true);
const fetchImageCaptcha = () => { const fetchImageCaptcha = () => {
setCaptchaVal("");
setCaptchaLoading(true); setCaptchaLoading(true);
system.getImageCaptcha().then((res: any) => { system.getImageCaptcha().then((res: any) => {
setImage(res.data.image); setImage(res.data.image);
@ -30,7 +35,7 @@ const LoginPage = () => {
}); });
}; };
const loginSubmit = (e: any) => { const loginSubmit = async () => {
if (!email) { if (!email) {
message.error("请输入管理员邮箱账号"); message.error("请输入管理员邮箱账号");
return; return;
@ -43,47 +48,60 @@ const LoginPage = () => {
message.error("请输入图形验证码"); message.error("请输入图形验证码");
return; return;
} }
if (captchaVal.length < 4) { if (captchaVal.length !== 4) {
message.error("图形验证码错误"); message.error("图形验证码错误");
return; return;
} }
if (loading) { await handleSubmit();
return;
}
handleSubmit();
}; };
const handleSubmit = () => { const handleSubmit = async () => {
if (loading) { if (loading) {
return; return;
} }
setLoading(true); setLoading(true);
login try {
.login(email, password, captchaKey, captchaVal) let res: any = await loginApi.login(
.then((res: any) => { email,
const token = res.data.token; password,
setToken(token); captchaKey,
getUser(); captchaVal
}) );
.catch((e) => { setToken(res.data.token); //将token写入本地
await getSystemConfig(); //获取系统配置并写入store
await getUser(); //获取登录用户的信息并写入store
navigate("/");
} catch (e) {
message.error("登录出现错误");
console.error("错误信息", e);
setLoading(false); setLoading(false);
setCaptchaVal(""); fetchImageCaptcha(); //刷新图形验证码
fetchImageCaptcha(); }
});
}; };
const getUser = () => { const getUser = async () => {
login.getUser().then((res: any) => { let res: any = await loginApi.getUser();
const data = res.data; dispatch(loginAction(res.data));
dispatch(loginAction(data)); };
setLoading(false);
navigate("/"); 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) => { const keyUp = (e: any) => {
if (e.keyCode === 13) { if (e.keyCode === 13) {
loginSubmit(e); loginSubmit();
} }
}; };

View File

@ -1,6 +1,6 @@
import { lazy } from "react"; import { lazy } from "react";
import { RouteObject } from "react-router-dom"; import { RouteObject } from "react-router-dom";
import { login } from "../api"; import { login, system } from "../api";
import InitPage from "../pages/init"; import InitPage from "../pages/init";
import { getToken } from "../utils"; import { getToken } from "../utils";
@ -23,52 +23,34 @@ import DepartmentPage from "../pages/department";
import TestPage from "../pages/test"; import TestPage from "../pages/test";
import ErrorPage from "../pages/error"; import ErrorPage from "../pages/error";
// 异步加载页面
// const LoginPage = lazy(() => import("../pages/login")); // 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; let RootPage: any = null;
if (getToken()) { if (getToken()) {
RootPage = lazy(async () => { RootPage = lazy(async () => {
return new Promise<any>((resolve) => { return new Promise<any>(async (resolve) => {
let userLoginToken = getToken(); try {
if (!userLoginToken) { let configRes: any = await system.getSystemConfig();
let userRes: any = await login.getUser();
resolve({ resolve({
default: InitPage, default: (
<InitPage configData={configRes.data} loginData={userRes.data} />
),
});
} catch (e) {
console.error("系统初始化失败", e);
resolve({
default: <ErrorPage />,
}); });
return;
} }
login.getUser().then((res: any) => {
resolve({
default: <InitPage loginData={res.data} />,
});
});
// todo token过期处理
}); });
}); });
} else { } else {
if (window.location.pathname !== "/login") { if (window.location.pathname !== "/login") {
window.location.href = "/login"; window.location.href = "/login";
} }
RootPage = <InitPage loginData={null} />; RootPage = <InitPage />;
} }
const routes: RouteObject[] = [ const routes: RouteObject[] = [

View File

@ -1,25 +1,19 @@
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
type SystemConfigStoreInterface = { type SystemConfigStoreInterface = {
systemApiUrl: string; systemApiUrl?: string;
systemPcUrl: string; systemPcUrl?: string;
systemH5Url: string; systemH5Url?: string;
systemLogo: string; systemLogo?: string;
systemName: string; systemName?: string;
}; memberDefaultAvatar?: string;
courseDefaultThumbs?: string[];
let defaultValue: SystemConfigStoreInterface = {
systemApiUrl: "",
systemPcUrl: "",
systemH5Url: "",
systemLogo: "",
systemName: "",
}; };
const systemConfigSlice = createSlice({ const systemConfigSlice = createSlice({
name: "systemConfig", name: "systemConfig",
initialState: { initialState: {
value: defaultValue, value: {},
}, },
reducers: { reducers: {
saveConfigAction(stage, e) { saveConfigAction(stage, e) {