feat: Oauth update

.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'

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",
-	});
-};
+

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);

src/router/index.ts

@@ -33,7 +33,7 @@ const routes: RouteObject[] = [
 	},
 	{
 		path: "/loading",
-		Component: (props) => ComponentLoading(Loading, props),
+		Component: Loading,
 	},
 ];
 

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)
+			setTimeout(() => resolve(import("@/views/Main")), 1000);
 		}),
-)
-export default main
+);
+export default main;

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,
-			{
+		// makeAutoObservable(this);
+		makeObservable(this, {
+			token: observable,
+			userId: observable,
 			setToken: action,
-			},
-			{ autoBind: true },
-		);
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
+			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;
+	}
 }

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,
 	},
 });
 

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 };

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 (
 		<>
 			<DefaultLayOut />
 		</>
 	);
-};
+});

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%",
 											}}>
 											<GithubOutlined
+												onClick={() => {
+													oAuthLogin("github").then();
+												}}
 												style={{ ...iconStyles, color: "#333333" }}
 											/>
 										</div>
@@ -367,7 +369,7 @@ export default observer(() => {
 											}}>
 											<GitlabOutlined
 												onClick={() => {
-													oAuthLogin("GITEE").then();
+													oAuthLogin("gitee").then();
 												}}
 												style={{ ...iconStyles, color: "#FF6A10" }}
 											/>