Next.js基于Redux状态的受保护组件设计模式咨询

因为_app.tsx是Redux Provider的外层，无法直接使用useAppSelector，你可以采用以下几种设计模式实现页面/组件的权限保护：

1. 封装权限验证高阶组件(HOC) #

通过高阶组件包裹需要权限的页面组件，在HOC内部获取Redux状态并处理权限逻辑，所有需要保护的页面只需复用这个HOC即可。

import { useAppSelector } from '../app/store'; // 替换为你的Redux store路径
import { NextPage } from 'next';
import { useEffect } from 'react';
import Router from 'next/router';

// 高阶组件：处理登录权限验证
const withAuth = <P extends {}>(PageComponent: NextPage<P>) => {
  const AuthProtectedPage: NextPage<P> = (props) => {
    const { loggedIn } = useAppSelector(state => state.auth);

    // 未登录时跳转登录页
    useEffect(() => {
      if (!loggedIn) {
        Router.push('/login');
      }
    }, [loggedIn]);

    // 未登录阶段返回加载态，避免闪现未授权内容
    if (!loggedIn) {
      return <div>加载中...</div>;
    }

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

  return AuthProtectedPage;
};

// 使用示例：在需要保护的页面组件导出时调用
const Home: NextPage = () => {
  return (
    <div className="space-y-3">
      <p>logged in</p>
    </div>
  );
};

export default withAuth(Home);

2. 使用权限验证容器组件 #

封装一个通用的权限验证容器组件，将需要保护的页面内容包裹在其中，逻辑和HOC类似，但写法更偏向组件化。

import { useAppSelector } from '../app/store';
import { useEffect } from 'react';
import Router from 'next/router';

interface RequireAuthProps {
  children: React.ReactNode;
  // 可选：扩展支持角色权限，比如 requiredRole: string
}

export const RequireAuth = ({ children }: RequireAuthProps) => {
  const { loggedIn } = useAppSelector(state => state.auth);

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

  if (!loggedIn) {
    return <div>加载中...</div>;
  }

  return <>{children}</>;
};

// 使用示例：在页面组件内部包裹内容
const Home: NextPage = () => {
  return (
    <RequireAuth>
      <div className="space-y-3">
        <p>logged in</p>
      </div>
    </RequireAuth>
  );
};

3. 结合Next.js服务端数据获取方法（SSR/SSG场景） #

如果你的页面使用服务端渲染(SSR)或静态生成(SSG)，可以在getServerSideProps或getStaticProps中直接验证用户权限（比如从请求cookie获取认证信息），这种方式能在页面渲染前完成权限拦截，避免客户端闪现问题。

import { NextPage, NextPageContext } from 'next';

const Home: NextPage = () => {
  return (
    <div className="space-y-3">
      <p>logged in</p>
    </div>
  );
};

export const getServerSideProps = async (context: NextPageContext) => {
  // 从请求cookie中获取认证token（根据你的认证方式调整）
  const authToken = context.req?.cookies?.authToken;

  // 无token则跳转到登录页
  if (!authToken) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  // 可选：验证token有效性，获取用户信息后传递给页面props
  // const user = await validateToken(authToken);

  return {
    props: {}, // 可传递用户信息给页面
  };
};

export default Home;

注意事项 #

• 处理加载状态：未登录时返回加载态或空，避免未授权内容短暂闪现
• 角色扩展：如果需要细粒度角色权限，可以在组件/HOC中添加requiredRole参数，结合Redux中的用户角色信息判断
• 路由守卫：如果使用Next.js App Router，可以在路由组的layout.tsx中实现类似的权限验证逻辑（需确保在Provider内部）

内容的提问来源于stack exchange，提问作者randombits