diff --git a/.env.development b/.env.development index fe5c2e8..cc6dd92 100644 --- a/.env.development +++ b/.env.development @@ -14,7 +14,7 @@ VITE_API_BASE_URL='http://127.0.0.1:3000' VITE_TITLE_NAME='五味子云存储' # token key -VITE_APP_TOKEN_KEY='token' +VITE_APP_TOKEN_KEY='schisandra' # the upload url VITE_UPLOAD_URL='http://127.0.0.1:3000' diff --git a/src/api/user/index.ts b/src/api/user/index.ts index 7c66f75..41a7eca 100644 --- a/src/api/user/index.ts +++ b/src/api/user/index.ts @@ -21,12 +21,4 @@ export const oauthLogin = (type: string) => { method: "get", }); }; -/** - * 获取用户信息 - */ -export const geOauthtUserInfo = () => { - return web.request({ - url: "/oauth/userInfo/", - method: "get", - }); -}; + diff --git a/src/components/LoadingPage/index.tsx b/src/components/LoadingPage/index.tsx index ef0ae31..0a986a6 100644 --- a/src/components/LoadingPage/index.tsx +++ b/src/components/LoadingPage/index.tsx @@ -1,27 +1,24 @@ /** @format */ -import React, { useEffect } from "react"; +import { useEffect } from "react"; import "./index.less"; -import { geOauthtUserInfo } from "@/api/user"; -import localforage from "localforage"; - -const LoadingPage: React.FC = () => { - async function getUserInfo() { - const res: any = await geOauthtUserInfo(); - localforage.setItem("token", res.data.token).then(); - localforage.setItem("userId", res.data.userId).then(); - } +import { useNavigate, useSearchParams } from "react-router-dom"; +import useStore from "@/utils/store/useStore.tsx"; +import { observer } from "mobx-react"; +const LoadingPage = () => { + const [search] = useSearchParams(); + const navigate = useNavigate(); + const token: any = search.get("token"); + const userId: any = search.get("userId"); + const store = useStore("user"); + store.setToken(token); + store.setUserId(userId); useEffect(() => { document.body.classList.add("loading-body"); - getUserInfo().then(() => { - if ( - localforage.getItem("token").then() !== null && - localforage.getItem("userId").then() !== null - ) { - window.location.href = "/main"; - } - }); + if (store.getToken() !== null && store.getUserId() !== null) { + navigate("/main"); + } return () => { document.body.classList.remove("loading-body"); }; @@ -70,4 +67,4 @@ const LoadingPage: React.FC = () => { ); }; -export default React.memo(LoadingPage); +export default observer(LoadingPage); diff --git a/src/router/index.ts b/src/router/index.ts index 44cc720..bd09ac0 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -33,7 +33,7 @@ const routes: RouteObject[] = [ }, { path: "/loading", - Component: (props) => ComponentLoading(Loading, props), + Component: Loading, }, ]; diff --git a/src/router/modules/main/index.ts b/src/router/modules/main/index.ts index 16548a1..a79839c 100644 --- a/src/router/modules/main/index.ts +++ b/src/router/modules/main/index.ts @@ -1,9 +1,11 @@ -import { lazy } from 'react' +/** @format */ + +import { lazy } from "react"; const main = lazy( - () => - new Promise((resolve: any) => { - setTimeout(() => resolve(import('@/views/Main')), 1000) - }), -) -export default main + () => + new Promise((resolve: any) => { + setTimeout(() => resolve(import("@/views/Main")), 1000); + }), +); +export default main; diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 4059444..17f9811 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -1,26 +1,28 @@ /** @format */ -import { action, makeAutoObservable } from "mobx"; -import { makePersistable, isHydrated } from "mobx-persist-store"; +import { action, makeObservable, observable } from "mobx"; +import { isHydrated, makePersistable } from "mobx-persist-store"; import { handleLocalforage } from "@/utils/localforage"; export class useUserStore { - token: any = ""; + token: string = ""; + userId: string = ""; constructor() { - makeAutoObservable( - this, - { - setToken: action, - }, - { autoBind: true }, - ); - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore + // makeAutoObservable(this); + makeObservable(this, { + token: observable, + userId: observable, + setToken: action, + setUserId: action, + getToken: action, + getUserId: action, + isHydrated: action, + }); makePersistable(this, { // 在构造函数内使用 makePersistable - name: "token", // 保存的name,用于在storage中的名称标识,只要不和storage中其他名称重复就可以 - properties: ["token"], // 要保存的字段,这些字段会被保存在name对应的storage中,注意:不写在这里面的字段将不会被保存,刷新页面也将丢失:get字段例外。get数据会在数据返回后再自动计算 + name: "userInfo", // 保存的name,用于在storage中的名称标识,只要不和storage中其他名称重复就可以 + properties: ["token", "userId"], // 要保存的字段,这些字段会被保存在name对应的storage中,注意:不写在这里面的字段将不会被保存,刷新页面也将丢失:get字段例外。get数据会在数据返回后再自动计算 storage: handleLocalforage, // 保存的位置:看自己的业务情况选择,可以是localStorage,sessionstorage // 。。还有一些其他配置参数,例如数据过期时间等等,可以康康文档,像storage这种字段可以配置在全局配置里,详见文档 }).then( @@ -31,15 +33,23 @@ export class useUserStore { ); } - get getToken() { + getToken() { return this.token ? this.token : null; } - get isHydrated() { + getUserId() { + return this.userId ? this.userId : null; + } + + isHydrated() { return isHydrated(this); } setToken(token: string) { this.token = token; } + + setUserId(userId: string) { + this.userId = userId; + } } diff --git a/src/utils/axios/web.ts b/src/utils/axios/web.ts index 69e56a4..be12010 100644 --- a/src/utils/axios/web.ts +++ b/src/utils/axios/web.ts @@ -3,13 +3,11 @@ import Request from "./request"; import { handleLocalforage } from "@/utils/localforage"; -const token = String(handleLocalforage.getItem("token")); +const token = handleLocalforage.getItem("token").then(); const web: Request = new Request({ baseURL: import.meta.env.VITE_APP_BASE_API, headers: { - // 'Content-Type': 'application/json;charset=utf-8', - // Accept: 'application/json', - Authorization: token, + token: import.meta.env.VITE_APP_TOKEN_KEY + " " + token, }, }); diff --git a/src/utils/encrypt/encrypt.ts b/src/utils/encrypt/encrypt.ts index 5f2d073..568c3a4 100644 --- a/src/utils/encrypt/encrypt.ts +++ b/src/utils/encrypt/encrypt.ts @@ -4,26 +4,28 @@ import CryptoJS from "crypto-js"; const key = CryptoJS.enc.Hex.parse("d86d7bab3d6ac01ad9dc6a897652f2d2"); // const iv = CryptoJS.enc.Latin1.parse("d86d7bab3d6ac01ad9dc6a897652f2d2"); -// 加密 +/** + * 加密 + * @param data + */ function EncryptData(data: any) { - const srcs = CryptoJS.enc.Utf8.parse(data); - const encrypted = CryptoJS.AES.encrypt(srcs, key, { + const src = CryptoJS.enc.Utf8.parse(data); + const encrypted = CryptoJS.AES.encrypt(src, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); return encrypted.toString(); } -// 解密 +/** + * 解密 + * @param data + */ function DecryptData(data: any) { - // const stime = new Date().getTime(); const decrypt = CryptoJS.AES.decrypt(data, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7, }); - const result = JSON.parse(CryptoJS.enc.Utf8.stringify(decrypt).toString()); - // const etime = new Date().getTime(); - // console.log("DecryptData Time:" + (etime - stime)); - return result; + return JSON.parse(CryptoJS.enc.Utf8.stringify(decrypt).toString()); } export { EncryptData, DecryptData }; diff --git a/src/views/Main/index.tsx b/src/views/Main/index.tsx index 454a203..275a498 100644 --- a/src/views/Main/index.tsx +++ b/src/views/Main/index.tsx @@ -1,11 +1,14 @@ /** @format */ import DefaultLayOut from "@/layout/default"; +import { useEffect } from "react"; +import { observer } from "mobx-react"; -export default () => { +export default observer(() => { + useEffect(() => {}, []); return ( <> ); -}; +}); diff --git a/src/views/User/Login/index.tsx b/src/views/User/Login/index.tsx index 1b65bc9..939e8ce 100644 --- a/src/views/User/Login/index.tsx +++ b/src/views/User/Login/index.tsx @@ -10,9 +10,8 @@ import { WechatOutlined, } from "@ant-design/icons"; import { ProFormCaptcha, ProFormCheckbox, ProFormText } from "@ant-design/pro-components"; -import { Divider, Space, Tabs, message, Image, Alert, Form, Button } from "antd"; -import { CSSProperties, useRef } from "react"; -import { useState } from "react"; +import { Alert, Button, Divider, Form, Image, message, Space, Tabs } from "antd"; +import { CSSProperties, 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"; @@ -351,6 +350,9 @@ export default observer(() => { borderRadius: "50%", }}> { + oAuthLogin("github").then(); + }} style={{ ...iconStyles, color: "#333333" }} /> @@ -367,7 +369,7 @@ export default observer(() => { }}> { - oAuthLogin("GITEE").then(); + oAuthLogin("gitee").then(); }} style={{ ...iconStyles, color: "#FF6A10" }} />