feat: login cookie

package-lock.json

@@ -23,6 +23,7 @@
         "antd": "^5.4.0",
         "axios": "^0.27.2",
         "classnames": "^2.3.2",
+        "cookies-ts": "^1.0.5",
         "eventemitter3": "^5.0.1",
         "google-protobuf": "^3.21.2",
         "lodash-es": "^4.17.21",
@@ -6924,6 +6925,11 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/cookies-ts": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/cookies-ts/-/cookies-ts-1.0.5.tgz",
+      "integrity": "sha512-WpfZCpgrkbo1L39ZHCSvSV2xSERuzlCdGFyIT8QFFmmyPe6UWrNaq8DCIyluo9VmLLlXb1v7go2xrxcYNSCxBg=="
+    },
     "node_modules/copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -33734,6 +33740,11 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "cookies-ts": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/cookies-ts/-/cookies-ts-1.0.5.tgz",
+      "integrity": "sha512-WpfZCpgrkbo1L39ZHCSvSV2xSERuzlCdGFyIT8QFFmmyPe6UWrNaq8DCIyluo9VmLLlXb1v7go2xrxcYNSCxBg=="
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",

package.json

@@ -18,6 +18,7 @@
     "antd": "^5.4.0",
     "axios": "^0.27.2",
     "classnames": "^2.3.2",
+    "cookies-ts": "^1.0.5",
     "eventemitter3": "^5.0.1",
     "google-protobuf": "^3.21.2",
     "lodash-es": "^4.17.21",

src/ui/Layout/index.tsx

 import "@/styles/core.scss";
-import { NavLink, Outlet } from "react-router-dom";
+import { NavLink, Outlet, type LoaderFunction } from "react-router-dom";
 
 import { useConfig } from "@/config";
+import { accountStore, type User } from "@/stores";
 
 const NeosConfig = useConfig();
 import styles from "./index.module.scss";
+import { getCookie, CookieKeys } from "@/ui/Shared";
 
-export const NeosLayout = () => {
+export const loader: LoaderFunction = () => {
+  const user = getCookie<User>(CookieKeys.USER);
+  if (user) accountStore.login(user);
+  return null;
+};
+
+export const Component = () => {
   return (
     <>
       <nav className={styles.navbar}>

src/ui/Neos.tsx

@@ -5,8 +5,6 @@ import {
   Route,
   RouterProvider,
 } from "react-router-dom";
-
-import { NeosLayout } from "./Layout";
 import LazyLoad, { Loading } from "./LazyLoad";
 
 // const Match = React.lazy(() => import("./Match"));
@@ -22,7 +20,7 @@ import LazyLoad, { Loading } from "./LazyLoad";
 const _router = createBrowserRouter([
   {
     path: "/",
-    element: <NeosLayout />,
+    lazy: () => import("./Layout"),
     children: [
       {
         path: "/",

src/ui/NewMatch/index.tsx

 import { Link, type LoaderFunction } from "react-router-dom";
 import { accountStore, type User } from "@/stores";
+import { setCookie, CookieKeys } from "@/ui/Shared";
 
 export const loader: LoaderFunction = () => {
   const sso = new URLSearchParams(location.search).get("sso");
   const user = sso ? getSSOUser(new URLSearchParams(atob(sso))) : undefined;
-  user && accountStore.login(user);
+  if (user) {
+    accountStore.login(user);
+    setCookie(CookieKeys.USER, JSON.stringify(user));
+  }
   return null;
 };
 

src/ui/Shared/cookies.ts

+import Cookies from "cookies-ts";
+
+const cookies = new Cookies();
+
+export enum CookieKeys {
+  USER = "user",
+}
+
+export const getCookie = <T>(key: CookieKeys) => {
+  return cookies.get(key) as unknown as T | null;
+};
+
+export const setCookie = <T>(key: CookieKeys, value: T) => {
+  cookies.set(key, value);
+};

src/ui/Shared/index.ts

 export * from "./css";
 export * from "./IconFont";
 export * from "./YgoCard";
+export * from "./cookies";