NextJS 应用暂时显示受限路由组件

Posted 2023-03-08

【中文标题】NextJS 应用暂时显示受限路由组件

【英文标题】：NextJS app temporarily shows restricted route component

【发布时间】：2021-08-02 06:16:31

【问题描述】：

我正在尝试全局保护路径名中包含“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>
  );
;

【参考方案1】：

Providers 是浏览器 ReactJS 功能，而不是服务器端功能。您的用例需要一个服务器端版本。

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

const MyPage = () => (
 <div> This is protected content </div>  
)

export async function getServerSideProps() 
  // test your authentication logic here
  
  // Redirect when not logged-in
  return 
     redirect: 
        destination: '/login',
        permanent: false,
     ,
  ;

  // If all went well, pass some props, like username
  return  props:  username: 'john'  

或者您可以阅读有关 NextJS 身份验证的章节。您可以使用useUser 挂钩，它将您重定向到登录页面。

我认为目前还没有一个简单的解决方案可以使用 NextJs 来“保护”某些 url 前缀。您可以创建一个自定义服务器，但它有点高级，并且有缺点，在文档中描述，https://nextjs.org/docs/advanced-features/custom-server