diff --git a/src/app/cache/index.ts b/src/app/cache/index.ts index 0d955730..106e7e1f 100644 --- a/src/app/cache/index.ts +++ b/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) || ""; diff --git a/src/app/config.ts b/src/app/config.ts index ad2de93a..e8b8353f 100644 --- a/src/app/config.ts +++ b/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", diff --git a/src/app/slices/auth.data.ts b/src/app/slices/auth.data.ts index 96427dcc..8e3c4fbf 100644 --- a/src/app/slices/auth.data.ts +++ b/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) { 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时长 diff --git a/src/common/component/RequireAuth.tsx b/src/common/component/RequireAuth.tsx index 9285c5c6..49b2762d 100644 --- a/src/common/component/RequireAuth.tsx +++ b/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 = ({ 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 ; - // 开启guest 并且没token 则等待guest登录结果 - if (loginConfig?.guest && !token) return null; + // 开启guest 并且没token 而且是允许guest访问的路由 则先去过渡页登录 + if (loginConfig?.guest && !token && allowGuest) return ; + // 登陆者是guest,并且不允许访问 + if (token && guest && !allowGuest) return ; return token ? children : ; }; diff --git a/src/routes/guest.tsx b/src/routes/guest.tsx new file mode 100644 index 00000000..eb3f232d --- /dev/null +++ b/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 ; + return null; +}; + +export default GuestLogining; diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index f781347b..c2c7e40d 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -55,7 +55,7 @@ export default function HomePage() { return ( <> - + {!guest && } {!guest && (
diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 58748882..e8f884df 100644 --- a/src/routes/index.tsx +++ b/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 = () => { }> + } /> } /> { } /> diff --git a/src/routes/setting/LogoutConfirmModal.tsx b/src/routes/setting/LogoutConfirmModal.tsx index 4cb88c2d..e612857d 100644 --- a/src/routes/setting/LogoutConfirmModal.tsx +++ b/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 = ({ 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 = ({ closeModal }) => { clearLocalData(); } toast.success("Logout Successfully"); - setTimeout(() => { - location.href = `${location.origin}#/login`; - }, 500); - // location.reload(); } }, [exited, clearLocal]); + useEffect(() => { + if (!token) { + navigateTo("/login"); + } + }, [token]); return (