Question

nextjs 中有很多保护路由的方法。我不需要在每个页面中都有 ssr。所以我在 useEffect 钩子中使用条件渲染来根据身份验证状态重定向用户。如果未通过身份验证，则重定向到“/”。如果登录并且用户尝试访问“/”，它将重定向到经过身份验证的页面。

假设有 /、/[user] 和 /[user]/dashboard 三个页面。我的“/”页面有登录表单，当用户进行身份验证时，它会重定向到“/[user]/dashboard”。如果用户在验证后尝试访问“/”，那么它将重定向到“/[user]/dashboard”。现在，当我转到“/[user]”并点击刷新时，我会自动重定向到“/[user]/dashboard”。

如何解决这个问题？

//context.tsx

const UserContext = createContext<{
  user: firebase.User | null | undefined;
}>({ user: null });

export function UserProvider({ children }: UserProviderProps) {
  const [user] = useAuthState(auth);
  
  useEffect(() => {
    if (!user && location.pathname !== "/") {
      Router.replace("/");
    } else if (user && location.pathname === "/") {
      Router.replace(`${user.displayName}/dashboard`);
    }
  });

  return (
    <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>
  );
}

export const useAuth = () => useContext(UserContext);

// pages/[user]/index.tsx

const Profile = () => {
  const { user } = useAuth();

  return (
    <Layout>
      <div>{user?.displayName}</div>
    </Layout>
  );
};

export default Profile;

Nextjs 受保护的路由

0 个答案: