Javascript NextJS应用程序临时显示受限路由组件

我试图全局保护路径名中包含“dashboard”的所有路由，但当我键入“/dashboard”时，它会显示组件约1秒，然后重定向到

/login

在加载

/dashboard

组件之前，如何将用户重定向到

/login

？我不希望未经验证的用户看到该组件

export const AuthContextProvider: FC<Props> = ({ children }) => {
  const [admin, setAdmin] = useState<Partial<Admin>>(null);
  const router = useRouter();
  const { loading } = useCurrentAdminQuery({
    onCompleted: (data) => {
      setAdmin(data.currentAdmin);
    },
    onError: () => {
      if (router.pathname.includes('dashboard'))
        return router.replace('/login');
    },
    fetchPolicy: 'network-only',
  });

  if (loading) return <div>loading...</div>;

  return (
    <AuthContext.Provider value={{ admin, setAdmin }}>
      {children}
    </AuthContext.Provider>
  );
};

export const AuthContextProvider:FC=（{children}）=>{
const[admin，setAdmin]=useState（null）；
const router=useRouter（）；
const{loading}=useCurrentAdminQuery({
未完成：（数据）=>{
setAdmin（data.currentAdmin）；
},
onError:（）=>{
if（router.pathname.includes（'dashboard'））
返回路由器。替换（'/login'）；
},
fetchPolicy:“仅限网络”，
});
如果（装载）返回装载。。。；
返回(
{儿童}
);
};

提供程序是浏览器功能，而不是服务器端功能。您的用例需要一个服务器端版本

例如，每个页面对象都应该在服务器端测试您的身份验证规则

constmypage=（）=>(
这是受保护的内容
)
导出异步函数getServerSideProps（）{
//在这里测试您的身份验证逻辑
//未登录时重定向
返回{
重定向：{
目标：'/login'，
永久性：假，
},
};
//如果一切顺利，传递一些道具，比如用户名
返回{props:{username:'john'}}
}

或者您可以阅读关于NextJS身份验证的章节。您可以使用一个

useUser

hook，它会将您重定向到登录页面

我不认为有一个简单的解决方案可以使用NextJs“保护”一些url前缀。您可以创建一个自定义服务器，但它有点高级，并且有一些缺点，如文档中所述