perf: Optimize login status and correct userAuth format

rockbenben · Jul 17, 2023 · d82c351 · d82c351 · vercel · Jul 17, 2023
1 parent 2ac08fe
commit d82c351
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 28 deletions.
diff --git a/src/pages/_components/UserPrompts.tsx b/src/pages/_components/UserPrompts.tsx
@@ -26,7 +26,7 @@ import {
 } from "@ant-design/icons";
 
 export default function UserPromptsPage() {
- const userAuth = useContext(AuthContext);
+ const { userAuth, refreshUserAuth } = useContext(AuthContext);
  const [userprompts, setUserPrompts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [copiedIndex, setCopiedIndex] = useState(null);
@@ -35,8 +35,9 @@ export default function UserPromptsPage() {
  const [open, setOpen] = useState(false);
 
  useEffect(() => {
- if (userAuth && userAuth.userAuth.data.userprompts) {
- setUserPrompts(userAuth.userAuth.data.userprompts);
+ console.log('userAuth:', userAuth); // 输出 userAuth 的内容
+ if (userAuth && userAuth.data.userprompts) {
+ setUserPrompts(userAuth.data.userprompts);
  }
  }, [userAuth]);
 
@@ -63,7 +64,8 @@ export default function UserPromptsPage() {
  setLoading(true);
  try {
  await updatePrompt(editingPromptId, values);
- window.location.reload();
+ await refreshUserAuth();
+ //window.location.reload();
  message.success(
  <Translate id='message.success'>词条更新成功！</Translate>
  );
@@ -94,7 +96,8 @@ export default function UserPromptsPage() {
  setLoading(true);
  try {
  await deletePrompt(id);
- window.location.reload();
+ await refreshUserAuth();
+ //window.location.reload();
  message.success(
  <Translate id='message.deletePrompt.success'>
  Prompt successfully deleted!

diff --git a/src/pages/_components/UserStatus.tsx b/src/pages/_components/UserStatus.tsx
@@ -8,7 +8,7 @@ import { submitPrompt } from "@site/src/api";
 import { AuthContext } from "./AuthContext";
 
 const UserStatus = () => {
- const { userAuth, setUserAuth } = useContext(AuthContext);
+ const { userAuth, setUserAuth, refreshUserAuth } = useContext(AuthContext);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
 
@@ -26,7 +26,8 @@ const UserStatus = () => {
  setLoading(true);
  try {
  await submitPrompt(values);
- window.location.reload();
+ await refreshUserAuth();
+ //window.location.reload();
  message.success(
  <Translate id='message.success'>词条提交成功！</Translate>
  );
@@ -46,13 +47,19 @@ const UserStatus = () => {
  }
  };
 
- if (userAuth && userAuth.data) {
+ if (userAuth === undefined) {
+ // 如果 userAuth 是 undefined，说明状态正在加载
+ return <div>Loading...</div>;
+ } else if (userAuth) {
  return (
  <div>
  <Link to='/user' style={{ marginRight: "10px" }}>
  <Translate id='link.user'>用户界面</Translate>
  </Link>
- <Link className='button button--secondary' onClick={handleLogout} style={{ marginRight: "10px" }}>
+ <Link
+ className='button button--secondary'
+ onClick={handleLogout}
+ style={{ marginRight: "10px" }}>
  <Translate id='button.logout'>注销</Translate>
  </Link>
  <Link className='button button--primary' onClick={() => setOpen(true)}>
@@ -159,7 +166,10 @@ const UserStatus = () => {
  } else {
  return (
  <div>
- <Link className='button button--secondary' onClick={() => setOpen(true)} style={{ marginRight: "10px" }}>
+ <Link
+ className='button button--secondary'
+ onClick={() => setOpen(true)}
+ style={{ marginRight: "10px" }}>
  <Translate id='button.login'>登录</Translate>
  </Link>
  <Link

diff --git a/src/pages/_components/login.tsx b/src/pages/_components/login.tsx
@@ -1,9 +1,17 @@
-import React, { useContext, useState } from "react";
-import { Button, Card, Form, Input, message, Tabs, Checkbox, Space } from "antd";
+import React, { useState } from "react";
+import {
+ Button,
+ Card,
+ Form,
+ Input,
+ message,
+ Tabs,
+ Checkbox,
+ Space,
+} from "antd";
 import Translate, { translate } from "@docusaurus/Translate";
 import Cookies from "js-cookie";
 import { login, register, forgotPassword } from "@site/src/api";
-import { AuthContext } from "./AuthContext";
 
 const rules = {
  username: [
@@ -33,13 +41,11 @@ const rules = {
 };
 
 const LoginPage = () => {
- const { setUserAuth } = useContext(AuthContext);
  const [loading, setLoading] = useState(false);
 
  const handleSuccess = (username, jwt) => {
  Cookies.set("auth_token", jwt, { expires: 365 });
  Cookies.set("username", username, { expires: 365 });
- setUserAuth({ username, jwt });
  // 发送消息给扩展
  window.postMessage({ action: "login", username, jwt }, "*");
  window.location.reload();
@@ -50,10 +56,14 @@ const LoginPage = () => {
  if (err.response.status === 400) {
  message.error(err.response.data.error.message);
  } else {
- message.error(translate({ id: "message.error", message: "发生错误，请稍后再试" }));
+ message.error(
+ translate({ id: "message.error", message: "发生错误，请稍后再试" })
+ );
  }
  } catch (err) {
- message.error(translate({ id: "message.error", message: "处理错误时发生错误" }));
+ message.error(
+ translate({ id: "message.error", message: "处理错误时发生错误" })
+ );
  }
  };
 
@@ -71,21 +81,43 @@ const LoginPage = () => {
  };
 
  const onFinishLogin = async (values) => {
- handleAuth(values, login, <Translate id='message.loginSuccess'>登录成功！</Translate>);
+ handleAuth(
+ values,
+ login,
+ <Translate id='message.loginSuccess'>登录成功！</Translate>
+ );
  };
 
  const onFinishRegister = async (values) => {
- handleAuth(values, register, <Translate id='message.registerSuccess'>注册成功！</Translate>);
+ handleAuth(
+ values,
+ register,
+ <Translate id='message.registerSuccess'>注册成功！</Translate>
+ );
  };
 
  const handleForgotPassword = async (values) => {
  setLoading(true);
  try {
  await forgotPassword(values.email);
- message.success(<Translate id='message.forgotPassword.success'>密码重置邮件已发送！</Translate>);
+ message.success(
+ <Translate id='message.forgotPassword.success'>
+ 密码重置邮件已发送！
+ </Translate>
+ );
  } catch (error) {
- console.error(translate({ id: "error.forgotPassword", message: "Error sending forgot password email:" }), error);
- message.error(<Translate id='message.forgotPassword.error'>发送密码重置邮件失败，请稍后重试</Translate>);
+ console.error(
+ translate({
+ id: "error.forgotPassword",
+ message: "Error sending forgot password email:",
+ }),
+ error
+ );
+ message.error(
+ <Translate id='message.forgotPassword.error'>
+ 发送密码重置邮件失败，请稍后重试
+ </Translate>
+ );
  } finally {
  setLoading(false);
  }
@@ -107,7 +139,9 @@ const LoginPage = () => {
  />
  </Form.Item>
  <Form.Item name='password' rules={rules.password}>
- <Input.Password placeholder={translate({ id: "input.password", message: "密码" })} />
+ <Input.Password
+ placeholder={translate({ id: "input.password", message: "密码" })}
+ />
  </Form.Item>
  <Form.Item>
  <Space size='middle'>
@@ -133,10 +167,14 @@ const LoginPage = () => {
  />
  </Form.Item>
  <Form.Item name='email' rules={rules.email}>
- <Input placeholder={translate({ id: "input.email", message: "邮箱" })} />
+ <Input
+ placeholder={translate({ id: "input.email", message: "邮箱" })}
+ />
  </Form.Item>
  <Form.Item name='password' rules={rules.password}>
- <Input.Password placeholder={translate({ id: "input.password", message: "密码" })} />
+ <Input.Password
+ placeholder={translate({ id: "input.password", message: "密码" })}
+ />
  </Form.Item>
  <Form.Item
  name='agreement'
@@ -189,7 +227,9 @@ const LoginPage = () => {
  }),
  },
  ]}>
- <Input placeholder={translate({ id: "placeholder.email", message: "邮箱" })} />
+ <Input
+ placeholder={translate({ id: "placeholder.email", message: "邮箱" })}
+ />
  </Form.Item>
  <Form.Item>
  <Button htmlType='submit' loading={loading}>
@@ -217,8 +257,15 @@ const LoginPage = () => {
  ];
 
  return (
- <Card title={<Translate id='card.welcome'>欢迎</Translate>} bordered={false}>
- <Tabs defaultActiveKey='1' activeKey={activeTab} onChange={setActiveTab} items={items} />
+ <Card
+ title={<Translate id='card.welcome'>欢迎</Translate>}
+ bordered={false}>
+ <Tabs
+ defaultActiveKey='1'
+ activeKey={activeTab}
+ onChange={setActiveTab}
+ items={items}
+ />
  </Card>
  );
 };