fix: open id checking order

server/basic_auth.go

@@ -59,10 +59,6 @@ func BasicAuthMiddleware(s *Server, next echo.HandlerFunc) echo.HandlerFunc {
 			return next(c)
 		}
 
-		if common.HasPrefixes(c.Path(), "/api/memo", "/api/tag", "/api/shortcut", "/api/user/:id/name") && c.Request().Method == http.MethodGet {
-			return next(c)
-		}
-
 		// If there is openId in query string and related user is found, then skip auth.
 		openID := c.QueryParam("openId")
 		if openID != "" {
@@ -80,6 +76,10 @@ func BasicAuthMiddleware(s *Server, next echo.HandlerFunc) echo.HandlerFunc {
 			}
 		}
 
+		if common.HasPrefixes(c.Path(), "/api/memo", "/api/tag", "/api/shortcut", "/api/user/:id/name") && c.Request().Method == http.MethodGet {
+			return next(c)
+		}
+
 		sess, err := session.Get("session", c)
 		if err != nil {
 			return echo.NewHTTPError(http.StatusUnauthorized, "Missing session").SetInternal(err)

web/src/components/UserBanner.tsx

@@ -12,8 +12,25 @@ interface Props {}
 const UserBanner: React.FC<Props> = () => {
   const user = useAppSelector((state) => state.user.user);
   const [shouldShowPopupBtns, setShouldShowPopupBtns] = useState(false);
+  const [username, setUsername] = useState("Memos");
+  const isVisitorMode = userService.isVisitorMode();
 
-  const [username, setUsername] = useState(user ? user.name : "Memos");
+  useEffect(() => {
+    const currentUserId = userService.getUserIdFromPath();
+    if (isVisitorMode && currentUserId) {
+      api
+        .getUserNameById(currentUserId)
+        .then(({ data }) => {
+          const { data: username } = data;
+          setUsername(username);
+        })
+        .catch(() => {
+          toastHelper.error("User not found");
+        });
+    } else if (user) {
+      setUsername(user.name);
+    }
+  }, []);
 
   const handleUsernameClick = useCallback(() => {
     locationService.clearQuery();
@@ -23,35 +40,11 @@ const UserBanner: React.FC<Props> = () => {
     setShouldShowPopupBtns(true);
   };
 
-  useEffect(() => {
-    if (username === "Memos") {
-      if (locationService.getState().pathname === "/") {
-        api.getSystemStatus().then(({ data }) => {
-          const { data: status } = data;
-          setUsername(status.host.name);
-        });
-      } else {
-        const currentUserId = userService.getCurrentUserId();
-        if (currentUserId) {
-          api
-            .getUserNameById(currentUserId)
-            .then(({ data }) => {
-              const { data: username } = data;
-              setUsername(username);
-            })
-            .catch(() => {
-              toastHelper.error("User not found");
-            });
-        }
-      }
-    }
-  }, []);
-
   return (
     <div className="user-banner-container">
       <div className="username-container" onClick={handleUsernameClick}>
         <span className="username-text">{username}</span>
-        {user?.role === "HOST" ? <span className="tag">MOD</span> : null}
+        {!isVisitorMode && user?.role === "HOST" ? <span className="tag">MOD</span> : null}
       </div>
       <span className="action-btn menu-popup-btn" onClick={handlePopupBtnClick}>
         <img src="/icons/more.svg" className="icon-img" />

web/src/pages/Home.tsx

 import { useEffect } from "react";
-import { userService } from "../services";
+import { locationService, userService } from "../services";
 import useLoading from "../hooks/useLoading";
 import Only from "../components/common/OnlyWhen";
 import Sidebar from "../components/Sidebar";
@@ -15,10 +15,12 @@ function Home() {
   useEffect(() => {
     userService
       .doSignIn()
-      .catch(() => {
-        // do nth
-      })
+      .catch()
       .finally(() => {
+        if (!userService.isVisitorMode() && !userService.getState().user) {
+          locationService.replaceHistory("/signin");
+          return;
+        }
         loadingState.setFinish();
       });
   }, []);