NexJs 重定向略有延迟

Posted 2023-03-05

【中文标题】NexJs 重定向略有延迟

【英文标题】：Slight delay in NexJs Redirection

【发布时间】：2022-01-04 16:05:27

【问题描述】：

如果您不是用户或尚未登录，我有此代码可防止您访问特定页面。我尝试将访问者或未注册用户重定向到登录页面，但我注意到 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;

【问题讨论】：

是的，如文档所述here。

【参考方案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