feat: 登录状态

apps/admin/src/view/XCode/index.tsx

@@ -21,7 +21,7 @@ export default function InviteCode() {
 
   const defaultColumns = [
     {
-      title: "字符",
+      title: "神秘代码",
       dataIndex: "code",
       key: "code",
       filters: [],

apps/server/src/controller/user.controller.ts

@@ -1,4 +1,4 @@
-import { Body, Controller, Inject, Post } from '@midwayjs/core';
+import { Body, Controller, Get, Inject, Post } from '@midwayjs/core';
 import { Context } from '@midwayjs/koa';
 import { BizCode } from '../biz/code';
 import {
@@ -10,7 +10,7 @@ import {
 import { UserAdminAuthDTO, UserWebAuthDTO } from '../dto/user.dto';
 import { XCodeService } from '../service/xcode.service';
 import { UserService } from '../service/user.service';
-import { createToken, md5 } from '../util/encrypt';
+import { createToken, decodeToken, md5 } from '../util/encrypt';
 
 @Controller('/user')
 export class UserController {
@@ -94,4 +94,16 @@ export class UserController {
       return { code: BizCode.ERROR, msg: '用户名密码错误' };
     }
   }
+
+  @Get('/web/state')
+  async() {
+    try {
+      const token = this.ctx.cookies.get(webSign);
+      const user = decodeToken(token);
+      return { code: BizCode.OK, data: user };
+    } catch (error) {
+      this.ctx.logger.error(error);
+      return { code: BizCode.ERROR, msg: '[error] /web/state error' };
+    }
+  }
 }

apps/web/src/api/index.ts

@@ -8,3 +8,5 @@ export const getChapterGuideById = (course_id: string) =>
 
 export const userLogin = (p: ILoginRequest) =>
   R.post("/api/user/web/auth", { ...p });
+
+export const userState = () => R.get("/api/user/web/state");

apps/web/src/components/Nav/index.tsx

@@ -2,10 +2,12 @@ import "./index.less";
 import { useNavigate } from "react-router-dom";
 import { menuRouters } from "../../router";
 import { Input } from "@arco-design/web-react";
-const InputSearch = Input.Search;
+import { useUserStore } from "../../store/user.store";
 
 function Nav() {
   const navigate = useNavigate();
+  const user = useUserStore((s: any) => s.user);
+  const exit = useUserStore((s: any) => s.userExit);
 
   return (
     <header>
@@ -31,10 +33,16 @@ function Nav() {
                 </span>
               )
           )}
-          <InputSearch allowClear placeholder="搜索" style={{ width: 150 }} />
         </div>
         <div className="end">
+          {!user ? (
             <span onClick={() => navigate("/login")}>登录</span>
+          ) : (
+            <div>
+              <span>{user.user_login}</span>
+              <span onClick={() => exit()}>退出</span>
+            </div>
+          )}
         </div>
       </nav>
     </header>

apps/web/src/router/Guard.tsx

@@ -2,6 +2,7 @@ import { Button, Result } from "@arco-design/web-react";
 import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import Cookies from "js-cookie";
+import { useUserStore } from "../store/user.store";
 
 interface IGuardProps {
   children: JSX.Element;
@@ -11,6 +12,8 @@ const needAuthList = ["course/detail"];
 
 export const Guard = (props: IGuardProps) => {
   const navigate = useNavigate();
+  const user = useUserStore((s: any) => s.user);
+  const fetchUser = useUserStore((s: any) => s.fetchUser);
 
   const Result403 = (
     <div style={{ paddingTop: 100 }}>
@@ -31,7 +34,9 @@ export const Guard = (props: IGuardProps) => {
   const needAuth = needAuthList.some((p) => location.pathname.indexOf(p) > -1);
 
   useEffect(() => {
+    console.log(user);
     console.log("location.pathname changed 拦截", location.pathname);
+    if (!user) fetchUser();
   }, [location.pathname]);
 
   if (!sign && needAuth) return Result403;

apps/web/src/store/user.store.ts

@@ -0,0 +1,25 @@
+import { create } from "zustand";
+import Cookie from "js-cookie";
+import { userState } from "../api";
+import { Message } from "@arco-design/web-react";
+
+export const useUserStore = create((set) => {
+  return {
+    user: null,
+    setUser: (user: any) => set({ user }),
+    fetchUser: async () => {
+      const sign = Cookie.get("_sign_web");
+      if (!sign) return set({ user: null });
+      userState().then((res: any) => {
+        const { code, data } = res;
+        if (code === 10000) set({ user: data });
+      });
+    },
+    userExit: () => {
+      set({ user: null });
+      Cookie.remove("_sign_web");
+      Cookie.remove("_sign_web.sig");
+      Message.success("拜拜~");
+    },
+  };
+});

apps/web/src/view/CourseDetail/components/DPlayer/index.tsx

@@ -11,10 +11,11 @@ interface IProps {
 
 function Player(props: IProps) {
   const playerRef = useRef<any>();
+  const instanceRef = useRef<any>();
 
   useEffect(() => {
     if (props.video) {
-      new DPlayer({
+      instanceRef.current = new DPlayer({
         container: playerRef.current,
         video: { ...props.video, type: "hls" },
         preload: "auto",
@@ -25,6 +26,9 @@ function Player(props: IProps) {
         },
       });
     }
+    return () => {
+      instanceRef.current.destroy();
+    };
   }, [props.video]);
 
   return <div id="vs" ref={playerRef} style={{ height: "100%" }}></div>;

apps/web/src/view/Login/index.tsx

@@ -3,6 +3,7 @@ import { userLogin } from "../../api";
 import { Message, Button } from "@arco-design/web-react";
 import "./index.less";
 import { useNavigate } from "react-router-dom";
+import { useUserStore } from "../../store/user.store";
 
 const defaultForm = {
   user_login: "",
@@ -17,6 +18,7 @@ export function Login() {
   let [countdown, setCountdown] = useState(DURATION);
   const timer = useRef<any>();
   const navigate = useNavigate();
+  const setUser = useUserStore((s: any) => s.setUser);
 
   const onClickSmsBtn = () => {
     setTimeout(() => {
@@ -31,7 +33,7 @@ export function Login() {
       if (code === 10000) {
         Message.success(msg);
         navigate(-1);
-        console.log(data);
+        setUser(data);
       }
       if (code === 20000) Message.error(msg);
     });