使用 Next.js 应用路由器实现受保护的路由有哪些有效方法？ [已关闭]

Question

我正在努力通过实施受保护的路由来增强 Next.js 应用程序的安全性。我想了解开发人员在使用 Next.js 应用路由器时发现的成功的不同策略或方法。我知道“最佳”方法可能是主观的，并且可能会根据项目的要求而有所不同。然而，我有兴趣了解各种观点和经验。如果您在 Next.js 中处理过受保护的路由，您能否分享一下您认为有效的方法以及您选择背后的原因？当我做出有关保护应用程序中的路由的决策时，您的见解将为我提供宝贵的指导。

Answer 1

创建高阶组件（HOC）： 您可以创建一个 HOC 来包装您的页面来处理身份验证逻辑，该逻辑将在呈现页面之前检查用户是否经过身份验证。如果用户未通过身份验证，您可以将其重定向到登录页面：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

const RequireAuth = (WrappedComponent) => {
  return (props) => {
    const router = useRouter();

    // Check if user is authenticated, if not, redirect to login
    useEffect(() => {
      if (!userIsAuthenticated) {
        router.push('/login');
      }
    }, []);

    return <WrappedComponent {...props} />;
  };
};

export default RequireAuth;

使用 HOC 保护路由： 使用 RequireAuth HOC 包装受保护的页面，以确保它们只能由经过身份验证的用户访问。

import RequireAuth from '../components/RequireAuth';

const ProtectedPage = () => {
  return <div>This is a protected page.</div>;
};

export default RequireAuth(ProtectedPage);

定义受保护的路由： 您可以创建一个配置文件，在其中定义受保护的路由。这样，您可以集中管理它们并减少冗余。

export const protectedRoutes = [
  '/protectedPage1',
  '/protectedPage2',
  // Add more protected routes here
];

在 App Router 中应用路由保护： 在 Next.js 应用程序路由器中，您可以循环访问受保护的路由并将 RequireAuth HOC 应用于它们。

import { protectedRoutes } from '../utils/routes';

function MyApp({ Component, pageProps }) {
  const isProtectedRoute = protectedRoutes.includes(router.pathname);

  return isProtectedRoute ? <RequireAuth Component={Component} {...pageProps} /> : <Component {...pageProps} />;
}

export default MyApp;

使用 HOC 和配置文件，您可以轻松管理受保护的路由并使代码库更易于维护。