NexJs 重定向略有延迟

Question

如果您不是用户或尚未登录，我有此代码可防止您访问特定页面。我尝试将访问者或未注册用户重定向到登录页面，但我注意到 NextJs 中的重定向略有延迟。是否有任何其他方法可以更快地重定向未注册用户或您可以编写代码给我的示例？

代码

---

AuthContext

import { useReducer, createContext } from "react";
import jwtDecode from "jwt-decode";

const initialState = {
  user: null,
};
if (typeof window !== "undefined") {
  if (localStorage.getItem("jwtToken")) {
    const decodedToken = jwtDecode(localStorage.getItem("jwtToken"));

    if (decodedToken.exp * 1000 < Date.now()) {
      localStorage.removeItem("jwtToken");
    } else {
      initialState.user = decodedToken;
    }
  }
}

const AuthContext = createContext({
  user: null,
  login: (userData) => {},
  logout: () => {},
});

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        user: action.payload,
      };
    case "LOGOUT":
      return {
        ...state,
        user: null,
      };
    default:
      return state;
  }
}

function AuthProvider(props) {
  const [state, dispatch] = useReducer(authReducer, initialState);

  function login(userData) {
    localStorage.setItem("jwtToken", userData.token);
    dispatch({
      type: "LOGIN",
      payload: userData,
    });
  }

  function logout() {
    localStorage.removeItem("jwtToken");
    dispatch({ type: "LOGOUT" });
  }

  return (
    <AuthContext.Provider
      value={{ user: state.user, login, logout }}
      {...props}
    />
  );
}

export { AuthContext, AuthProvider };

授权页面或保护路径

import { useContext, useEffect } from "react";
import { AuthContext } from "@context/auth";
import Router from "next/router";

const Authorized = ({ children }) => {
  const { user } = useContext(AuthContext);

  useEffect(() => {
    if (!user) Router.push("/login");
  }, [user]);

  if (!user) {
    return <h1>You are not authorized in this page</h1>;
  }

  return children;
};
export default Authorized;

具有授权功能的示例页面

import React from "react";
import Authorized from "./Authorized";

function Sample() {
  return (
    <>
      <Authorized>
        <h1>
          <center> Sample Page </center>
        </h1>
      </Authorized>
    </>
  );
}

export default Sample;

Answer 1

我像这样使用 useSession()：

const [session, loading] = useSession();
  
    
    const router = useRouter()


    React.useEffect(() => {


        if (!session){
          router.push('/login')
        }

        if (session) {
           router.push('/profile')
        }
    
      }, [])// you can put session, router in the array if you want to watch for changes