保罗｜API
@@ -40,8 +51,10 @@ function Aside() {
-
-
未登录
+
+
+
{profile.name || "未登录"}
+
diff --git a/src/components/Layout/FrontWrapper.tsx b/src/components/Layout/FrontWrapper.tsx
index 66b6c6c..09547e0 100644
--- a/src/components/Layout/FrontWrapper.tsx
+++ b/src/components/Layout/FrontWrapper.tsx
@@ -1,9 +1,11 @@
// React
import React, { useEffect, useLayoutEffect } from "react";
+import useGlobalData from "@/hooks/useGlobalData";
import { useLocation } from "react-router-dom";
// Components
+import GlobalContext from "@/components/GlobalContext";
import Aside from "@/components/Layout/Aside";
import Footer from "@/components/Layout/Footer";
@@ -18,6 +20,7 @@ interface FrontWrapperProps {
// Components
function FrontWrapper(props: FrontWrapperProps) {
const location = useLocation();
+ let [globalData, setGlobalData] = useGlobalData();
useEffect(() => {
const name = import.meta.env.PAUL_SITENAME;
@@ -35,11 +38,11 @@ function FrontWrapper(props: FrontWrapperProps) {
}, [location.pathname]);
return (
- <>
+
{props.element}
-
+
);
}
diff --git a/src/hooks/useGlobalContext.ts b/src/hooks/useGlobalContext.ts
new file mode 100644
index 0000000..32592a0
--- /dev/null
+++ b/src/hooks/useGlobalContext.ts
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+
+import GlobalContext from "@/components/GlobalContext";
+
+function useGlobalContext() {
+ return useContext(GlobalContext);
+}
+
+export default useGlobalContext;
diff --git a/src/hooks/useGlobalData.ts b/src/hooks/useGlobalData.ts
new file mode 100644
index 0000000..9e14aed
--- /dev/null
+++ b/src/hooks/useGlobalData.ts
@@ -0,0 +1,44 @@
+import { useReducer } from "react";
+
+import { IGlobalData } from "@/types/GlobalData";
+
+export type IAction =
+ | { type: "all", value: IGlobalData }
+ | { type: "profile", value: Partial
}
+
+export const initalState: IGlobalData = {
+ profile: {
+ name: "",
+ avatar: ""
+ }
+};
+
+function reducer(state: IGlobalData, action: IAction): IGlobalData {
+ if (!action) return state;
+
+ if (action.type === "all") {
+ return {
+ ...state,
+ ...action.value
+ };
+ }
+ else if (action.type === "profile") {
+ return {
+ ...state,
+ profile: {
+ ...state.profile,
+ ...action.value
+ }
+ };
+ }
+
+ return state;
+}
+
+function useGlobalData(): [IGlobalData, React.Dispatch]{
+ let [state, dispatch] = useReducer(reducer, initalState);
+
+ return [state, dispatch];
+}
+
+export default useGlobalData;
diff --git a/src/hooks/useStat.ts b/src/hooks/useStat.ts
new file mode 100644
index 0000000..17e99e4
--- /dev/null
+++ b/src/hooks/useStat.ts
@@ -0,0 +1,38 @@
+import { useState } from "react";
+
+export interface IParamsOption {
+ defaultValue?: Record;
+ removeBlank?: boolean
+}
+
+function useStat>(defaultValue: T, options?: IParamsOption | undefined): [T, ((newState: Partial) => T), (value: React.SetStateAction) => void];
+
+// 适合组件状态设置的归档和存储，不可还原，需要还原成初始字段可使用 useParams
+function useStat(initValue = {}, options?: IParamsOption | undefined) {
+ const [state, setState] = useState(initValue);
+
+ // 删除没用的
+ const removeUndefined = (obj: Record) => {
+ const _keys = Object.keys(obj);
+
+ _keys.forEach(item => {
+ if (options?.removeBlank) {
+ (obj[item] === undefined || obj[item] === "") && delete obj[item];
+ }
+ else {
+ obj[item] === undefined && delete obj[item];
+ }
+ })
+
+ return obj;
+ }
+
+ // 覆盖部分值
+ const setStat = (newState: Record = {}) => {
+ setState(prevState => removeUndefined({ ...prevState, ...newState }));
+ }
+
+ return [state, setStat, setState];
+}
+
+export default useStat;
diff --git a/src/index.css b/src/index.css
index 6193e71..89c5314 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,7 +2,7 @@
# Paul API
# By: Dreamer-Paul
-# Last Update: 2021.12.16
+# Last Update: 2022.5.3
保罗的首页、作品和 API 页通用模板
@@ -108,6 +108,7 @@ button{
color: #fff;
width: 10em;
position: fixed;
+ user-select: none;
background-color: #3498db;
background-color: var(--primary);
transition: transform .3s;
@@ -146,6 +147,7 @@ button{
}
.sidebar nav i{
opacity: .8;
+ pointer-events: none;
transition: transform .3s;
}
@@ -158,7 +160,7 @@ button{
}
.sidebar a.active:before ,.sidebar .has-child > a:before{
right: 0;
- content: '';
+ content: "";
position: absolute;
border: .75em solid transparent;
border-right-color: #fff;
@@ -177,22 +179,28 @@ button{
box-shadow: .25em 0 .5em rgba(0, 0, 0, .2);
}
+ .sidebar a.active:before ,.sidebar .has-child > a:before{
+ content: none;
+ }
+
aside .toggle{
top: 0;
left: 10em;
- z-index: 3;
- color: #fff;
- width: 2.5em;
- height: 2.5em;
- cursor: pointer;
position: absolute;
+
+ z-index: 3;
+ width: 3em;
+ height: 3em;
+ color: #fff;
+ cursor: pointer;
+ line-height: 3em;
text-align: center;
background-color: var(--primary);
box-shadow: .25em 0 .5em rgba(0, 0, 0, .2);
}
aside .toggle:before{
content: "\f0c9";
- line-height: 2.5em;
+ font-size: 1.2em;
font-family: "FontAwesome";
}
@@ -207,20 +215,28 @@ button{
}
.sidebar .user-area{
- cursor: pointer;
- user-select: none;
- padding: .75em 1em;
- transition: background .3s;
- border-top: 1px solid rgba(0, 0, 0, .15);
+ transition: background-color .3s;
+ background-color: rgba(0, 0, 0, .1);
}
-.sidebar .user-area:hover{ background: rgba(0, 0, 0, .2) }
+.sidebar .user-area:hover{ background-color: rgba(0, 0, 0, .2) }
+
+.sidebar .user-area a{
+ color: inherit;
+ display: block;
+ padding: .75em 1em;
+}
+
.sidebar .user-area img{
width: 2em;
+ height: 2em;
+ object-fit: cover;
border-radius: 66%;
+ pointer-events: none;
border: 2px solid #fff;
}
.sidebar .user-area .username{
margin-left: .5em;
+ pointer-events: none;
vertical-align: middle;
}
diff --git a/src/index.tsx b/src/index.tsx
index d88599e..91c6b99 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,6 +10,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
// Routes
import Home from "./pages/index";
+import Login from "./pages/login";
import Notice from "./pages/notice";
import Log from "./pages/log";
import Netease from "./pages/netease";
@@ -32,6 +33,9 @@ function App() {
} />}
/>
+ } /> }
+ />
} /> }
/>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a3f782c..39dd3a8 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -18,7 +18,7 @@ const apiMap: Record = {
function Index() {
- const { data: stat } = useRequest(() => getStat());
+ const { data: stat } = useRequest(getStat);
return (
@@ -87,7 +87,6 @@ function Index() {
-
)
}
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
new file mode 100644
index 0000000..5e5101b
--- /dev/null
+++ b/src/pages/login.tsx
@@ -0,0 +1,89 @@
+// React
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useRequest } from "ahooks";
+import useStat from "@/hooks/useStat";
+import useGlobalContext from "@/hooks/useGlobalContext";
+
+
+// UI
+import ArticleHead from "@/components/Layout/ArticleHead";
+
+
+// Tool
+import loginRequest from "../server/api/auth/login";
+
+
+// Interface
+import { MouseEvent, ChangeEvent } from "react";
+
+
+// Components
+function Login() {
+ const navigate = useNavigate();
+ const { globalData, setGlobalData } = useGlobalContext();
+ const { loading, run } = useRequest(
+ (params) => loginRequest({
+ query: params
+ }),
+ {
+ manual: true,
+ onSuccess: (data) => {
+ console.log(data);
+
+ setGlobalData({
+ type: "profile",
+ value: data.profile
+ });
+
+ navigate("/")
+ }
+ }
+ );
+
+ const [input, setInput] = useStat({
+ username: "",
+ password: ""
+ });
+
+ const onSubmit = (ev: MouseEvent) => {
+ ev.preventDefault();
+
+ run(input);
+
+ console.log("ok");
+ }
+
+ const onInputChange = (ev: ChangeEvent) => {
+ setInput({ [ev.target.name]: ev.target.value });
+ }
+
+ return (
+
+
+
+
+ )
+}
+
+export default Login;
diff --git a/src/server/api/acgm/index.ts b/src/server/api/acgm.ts
similarity index 95%
rename from src/server/api/acgm/index.ts
rename to src/server/api/acgm.ts
index dc435da..3b02a48 100644
--- a/src/server/api/acgm/index.ts
+++ b/src/server/api/acgm.ts
@@ -1,8 +1,8 @@
import { Api, Get, Query, useContext, useInject } from "@midwayjs/hooks";
import { RedisService } from "@midwayjs/redis";
-import { prisma } from "../../utils/prisma";
+import { prisma } from "../utils/prisma";
-import { getSong } from "../../utils/netease";
+import { getSong } from "../utils/netease";
export default Api(
Get(),
@@ -20,7 +20,7 @@ export default Api(
const dbCount = await prisma.aCGM.count();
const skip = Math.floor(Math.random() * dbCount);
-
+
const item = await prisma.aCGM.findMany({
take: 1,
skip
diff --git a/src/server/api/acgm/add.ts b/src/server/api/admin/acgm/add.ts
similarity index 87%
rename from src/server/api/acgm/add.ts
rename to src/server/api/admin/acgm/add.ts
index 030dc5b..7530d09 100644
--- a/src/server/api/acgm/add.ts
+++ b/src/server/api/admin/acgm/add.ts
@@ -1,11 +1,14 @@
-import { Api, Post, Query, useContext, useInject } from "@midwayjs/hooks";
+import { Api, Post, Query, useContext, useInject, Middleware } from "@midwayjs/hooks";
import { RedisService } from "@midwayjs/redis";
-import { prisma } from "../../utils/prisma";
+import { JwtPassportMiddleware } from "../../../middleware/jwt.middleware";
-import { getSong } from "../../utils/netease";
+import { prisma } from "../../../utils/prisma";
+
+import { getSong } from "../../../utils/netease";
export default Api(
Post(),
+ Middleware(JwtPassportMiddleware),
Query<{ id: string, bangumi: string }>(),
async () => {
const ctx = useContext();
diff --git a/src/server/api/auth/login.ts b/src/server/api/auth/login.ts
new file mode 100644
index 0000000..6b8ed36
--- /dev/null
+++ b/src/server/api/auth/login.ts
@@ -0,0 +1,27 @@
+import { Api, Get, Query, useContext, useInject } from "@midwayjs/hooks";
+import { JwtService } from '@midwayjs/jwt';
+
+export default Api(
+ Get(),
+ Query<{ username: string, password: string }>(),
+ async () => {
+ const ctx = useContext();
+
+ const jwt = await useInject(JwtService);
+
+ const token = await jwt.sign({ name: "Paul" });
+
+ ctx.cookies.set("paul-token", token, {
+ maxAge: 60 * 60 * 24 * 2,
+ httpOnly: true
+ });
+
+ return {
+ profile: {
+ name: "Paul",
+ avatar: "https://sdn.geekzu.org/avatar/d22eb460ecab37fcd7205e6a3c55c228?s=200&r=X&d=",
+ },
+ token
+ }
+ }
+);
diff --git a/src/server/configuration.ts b/src/server/configuration.ts
index f18b651..5c8e036 100644
--- a/src/server/configuration.ts
+++ b/src/server/configuration.ts
@@ -2,6 +2,8 @@ import { createConfiguration, hooks } from "@midwayjs/hooks";
import * as Koa from "@midwayjs/koa";
import * as dotenv from "dotenv";
import * as redis from "@midwayjs/redis";
+import * as jwt from "@midwayjs/jwt";
+import * as passport from "@midwayjs/passport";
const env = dotenv.config();
@@ -9,7 +11,9 @@ const env = dotenv.config();
* setup midway server
*/
export default createConfiguration({
- imports: [Koa, redis, hooks()],
+ imports: [
+ Koa, redis, hooks(), jwt, passport
+ ],
importConfigs: [{
default: {
keys: "session_keys",
@@ -20,6 +24,13 @@ export default createConfiguration({
db: 0,
},
},
+ jwt: {
+ secret: "Test000666hhhh",
+ expiresIn: "5h",
+ },
+ passport: {
+ session: false
+ }
}
}],
});
diff --git a/src/server/middleware/jwt.middleware.ts b/src/server/middleware/jwt.middleware.ts
new file mode 100644
index 0000000..f82e3bc
--- /dev/null
+++ b/src/server/middleware/jwt.middleware.ts
@@ -0,0 +1,30 @@
+import { Middleware } from "@midwayjs/decorator";
+import { PassportMiddleware } from "@midwayjs/passport";
+import { JwtStrategy } from "../strategy/jwt.strategy";
+import * as passport from "passport";
+import { NextFunction, Context } from '@midwayjs/koa';
+
+@Middleware()
+export class JwtPassportMiddleware extends PassportMiddleware(JwtStrategy) {
+ getAuthenticateOptions(): Promise | passport.AuthenticateOptions {
+ return {};
+ }
+
+ // resolve() {
+ // return async (ctx: Context, next: NextFunction) => {
+ // const result = await next();
+
+ // console.log(result);
+
+ // return {
+ // code: 0,
+ // msg: '111',
+ // data: result,
+ // }
+ // };
+ // }
+
+ static getName(): string {
+ return "auth";
+ }
+}
\ No newline at end of file
diff --git a/src/server/strategy/jwt.strategy.ts b/src/server/strategy/jwt.strategy.ts
new file mode 100644
index 0000000..b51c207
--- /dev/null
+++ b/src/server/strategy/jwt.strategy.ts
@@ -0,0 +1,30 @@
+import { useContext } from "@midwayjs/hooks";
+import { CustomStrategy, PassportStrategy } from '@midwayjs/passport';
+import { Strategy, ExtractJwt } from 'passport-jwt';
+import { Config } from '@midwayjs/decorator';
+
+@CustomStrategy()
+export class JwtStrategy extends PassportStrategy(
+ Strategy,
+ 'jwt'
+) {
+ @Config('jwt')
+ jwtConfig;
+
+ async validate(payload) {
+ console.log('payload', payload);
+
+ return payload;
+ }
+
+ getStrategyOptions(): any {
+ const ctx = useContext();
+
+ console.log(ctx.headers, ctx.cookies.get("paul-token"));
+
+ return {
+ secretOrKey: this.jwtConfig.secret,
+ jwtFromRequest: () => ctx.cookies.get("paul-token") //ExtractJwt.fromAuthHeaderAsBearerToken(),
+ };
+ }
+}
diff --git a/src/types/GlobalData.ts b/src/types/GlobalData.ts
new file mode 100644
index 0000000..808eb12
--- /dev/null
+++ b/src/types/GlobalData.ts
@@ -0,0 +1,6 @@
+export interface IGlobalData {
+ profile: {
+ name: string
+ avatar: string
+ }
+}
- 
- 
diff --git a/src/components/GlobalContext.tsx b/src/components/GlobalContext.tsx
new file mode 100644
index 0000000..84e8422
--- /dev/null
+++ b/src/components/GlobalContext.tsx
@@ -0,0 +1,14 @@
+import { createContext } from "react";
+
+import { IGlobalData } from "@/types/GlobalData";
+
+import { initalState, IAction } from "@/hooks/useGlobalData";
+
+const GlobalContext = createContext<{ globalData: IGlobalData, setGlobalData: React.Dispatch