refactor: guest mode

src/app/cache/index.ts

@@ -43,10 +43,6 @@ const tables = [
     storeName: "ui",
     description: "store UI state"
   }
-  // {
-  //   storeName: "message",
-  //   description: "store message with key-val full data",
-  // },
 ];
 const initCache = () => {
   const uid = localStorage.getItem(KEY_UID) || "";

src/app/config.ts

@@ -4,6 +4,7 @@ const BASE_URL = process.env.REACT_APP_RELEASE
   ? `${location.origin}/api`
   : `https://dev.voce.chat/api`;
 export const CACHE_VERSION = `0.3.1`;
+export const GuestRoutes = ["/", "/chat", "/chat/channel/:channel_id"];
 export const ContentTypes = {
   text: "text/plain",
   markdown: "text/markdown",

src/app/slices/auth.data.ts

@@ -21,7 +21,7 @@ interface State {
 const loginUser = localStorage.getItem(KEY_LOGIN_USER) || "";
 const initialState: State = {
   initialized: true,
-  guest: false,
+  guest: loginUser ? JSON.parse(loginUser).create_by == "guest" : false,
   user: loginUser ? JSON.parse(loginUser) : undefined,
   token: localStorage.getItem(KEY_TOKEN) || "",
   expireTime: Number(localStorage.getItem(KEY_EXPIRE) || +new Date()),
@@ -43,10 +43,10 @@ const authDataSlice = createSlice({
   reducers: {
     setAuthData(state, { payload }: PayloadAction<AuthData>) {
       const { initialized = true, user, token, refresh_token, expired_in = 0 } = payload;
-      const { uid } = user;
+      const { uid, create_by } = user;
       state.initialized = initialized;
       state.user = user;
-      // state.guest = user.create_by == "guest";
+      state.guest = create_by == "guest";
       state.token = token;
       state.refreshToken = refresh_token;
       // 当前时间往后推expire时长

src/common/component/RequireAuth.tsx

@@ -1,6 +1,7 @@
-import { FC, ReactElement, useEffect } from "react";
-import { Navigate } from "react-router-dom";
-import { useGetInitializedQuery, useLazyGuestLoginQuery } from "../../app/services/auth";
+import { FC, ReactElement } from "react";
+import { Navigate, useLocation, matchRoutes } from "react-router-dom";
+import { GuestRoutes } from "../../app/config";
+import { useGetInitializedQuery } from "../../app/services/auth";
 import { useGetLoginConfigQuery } from "../../app/services/server";
 import { useAppSelector } from "../../app/store";
 
@@ -8,24 +9,27 @@ interface Props {
   children: ReactElement;
   redirectTo?: string;
 }
-
+const GuestAllows = GuestRoutes.map((path) => {
+  return { path };
+});
 const RequireAuth: FC<Props> = ({ children, redirectTo = "/login" }) => {
+  // GuestRoutes
+  const location = useLocation();
+  const matchs = matchRoutes(GuestAllows, location);
+  const allowGuest = matchs ? !!matchs[0].pathname : false;
   const { data: loginConfig, isLoading: fetchingLoginConfig } = useGetLoginConfigQuery();
   const { isLoading: checkingInitial } = useGetInitializedQuery();
-  const [guestLogin] = useLazyGuestLoginQuery();
-  const { token, initialized } = useAppSelector((store) => store.authData);
-  useEffect(() => {
-    // 已初始化 ， 没token，并且开启了guest，则guest自动登录
-    if (initialized && !token && loginConfig?.guest) {
-      guestLogin();
-    }
-  }, [token, initialized, loginConfig]);
+  const { token, guest, initialized } = useAppSelector((store) => store.authData);
+  // console.log("authhhhh", allowGuest);
+
   // 初始化和login配置检查
   if (checkingInitial || fetchingLoginConfig) return null;
   //  未初始化 则先走setup 流程
   if (!initialized) return <Navigate to={`/onboarding`} replace />;
-  // 开启guest 并且没token  则等待guest登录结果
-  if (loginConfig?.guest && !token) return null;
+  // 开启guest 并且没token 而且是允许guest访问的路由  则先去过渡页登录
+  if (loginConfig?.guest && !token && allowGuest) return <Navigate to={"/guest_login"} replace />;
+  // 登陆者是guest，并且不允许访问
+  if (token && guest && !allowGuest) return <Navigate to={"/"} replace />;
   return token ? children : <Navigate to={redirectTo} replace />;
 };
 

src/routes/guest.tsx

@@ -0,0 +1,15 @@
+// import { useEffect } from "react";
+import { Navigate } from "react-router-dom";
+import { useGuestLoginQuery } from "../app/services/auth";
+import { useAppSelector } from "../app/store";
+
+// type Props = {};
+
+const GuestLogining = () => {
+  useGuestLoginQuery();
+  const { token, guest } = useAppSelector((store) => store.authData);
+  if (token && guest) return <Navigate to={"/"} replace />;
+  return null;
+};
+
+export default GuestLogining;

src/routes/home/index.tsx

@@ -55,7 +55,7 @@ export default function HomePage() {
   return (
     <>
       <Manifest />
-      <Notification />
+      {!guest && <Notification />}
       <StyledWrapper className={guest ? "guest" : ""}>
         {!guest && (
           <div className={`col left`}>

src/routes/index.tsx

@@ -26,6 +26,7 @@ import HomePage from "./home";
 import ChatPage from "./chat";
 import Loading from "../common/component/Loading";
 import store, { useAppSelector } from "../app/store";
+import GuestLogining from "./guest";
 let toastId: string;
 const PageRoutes = () => {
   const {
@@ -48,6 +49,7 @@ const PageRoutes = () => {
     <HashRouter>
       <Suspense fallback={<Loading fullscreen={true} />}>
         <Routes>
+          <Route path="/guest_login" element={<GuestLogining />} />
           <Route path="/oauth/:token" element={<OAuthPage />} />
           <Route
             path="/login"
@@ -91,6 +93,7 @@ const PageRoutes = () => {
           <Route path="/onboarding" element={<OnboardingPage />} />
 
           <Route
+            key={"main"}
             path="/"
             element={
               <RequireAuth>

src/routes/setting/LogoutConfirmModal.tsx

@@ -6,6 +6,8 @@ import StyledModal from "../../common/component/styled/Modal";
 import Button from "../../common/component/styled/Button";
 import Checkbox from "../../common/component/styled/Checkbox";
 import useLogout from "../../common/hook/useLogout";
+import { useNavigate } from "react-router-dom";
+import { useAppSelector } from "../../app/store";
 
 const StyledConfirm = styled(StyledModal)`
   .clear {
@@ -32,6 +34,8 @@ interface Props {
 }
 
 const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
+  const token = useAppSelector((store) => store.authData.token);
+  const navigateTo = useNavigate();
   const [clearLocal, setClearLocal] = useState(false);
   const { logout, exited, exiting, clearLocalData } = useLogout();
   const handleLogout = () => {
@@ -48,12 +52,13 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
         clearLocalData();
       }
       toast.success("Logout Successfully");
-      setTimeout(() => {
-        location.href = `${location.origin}#/login`;
-      }, 500);
-      // location.reload();
     }
   }, [exited, clearLocal]);
+  useEffect(() => {
+    if (!token) {
+      navigateTo("/login");
+    }
+  }, [token]);
 
   return (
     <Modal id="modal-modal">