白白是一名现居上海市的人士。在本文中，她将展示一个非常简单的登录系统。
前言
很久很久以前，小白部署了一个服务 service。
service 一点防备都没有。
有一天，有人把 service 的后门爆了，小白非常难受。
于是，她决定给这个服务写一个登录系统。
帐户-密码：The good old way
登录系统简单得很，写一个这就可以了：
1
2
3
4
5
6
7
8
9
|
// app/api/auth/route.ts
export async function POST(request: NextRequest) {
const { account, password } = await request.json();
if (account === "bai" && password === "super-strong-password") {
return NextResponse.json({ status: "ok" });
} else {
return NextResponse.json({ status: "not_ok" });
}
}
|
然后这么调用就行了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
// app/page.tsx
"use client";
import { LoginComponent, SecretComponent } from "./components/service";
import { useRef, useState } from "react";
export function Page() {
const account = useRef<string | null>(null);
const password = useRef<string | null>(null);
const [authResult, setAuthResult] = useState<boolean>(false);
return authResult ? (
<SecretComponent />
) : (
<LoginComponent
accountRef={account}
passwordRef={password}
onSubmitFunction={() => {
fetch("/api/auth", {
method: "POST",
body: JSON.stringify({
account: account.current,
password: password.current,
}),
})
.then((resp) => resp.json())
.then((json) => {
const { status } = json;
if (status === "ok") {
setAuthResult(true);
}
});
}}
/>
);
}
|
这非常好，如果只有小白一个人在用这个系统，而且服务器没有被攻破的话，这个好像已经够用了。