react-high-order-component-auth(HOK).md

За да използвате проверка за логнат потребител за всяка страница в Next.js, можете да използвате High Order Component (HOC) или wrapper component, който да включва функцията getServerSideProps. Така ще можете да използвате тази проверка на всяка страница, която искате да бъде достъпна само за логнати потребители.

Ето пример как може да създадете HOC, който да включва getServerSideProps за проверка на потребителското състояние:

import { useRouter } from 'next/router';

export const withAuth = (WrappedComponent) => {
  const Wrapper = (props) => {
    const router = useRouter();
    const { isLoggedIn } = props;

    if (!isLoggedIn) {
      router.push('/login');
      return null;
    }

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

  Wrapper.getInitialProps = async (ctx) => {
    const isLoggedIn = true; // Тук може да направите проверка за логнат потребител

    // Ако потребителят не е логнат, пренасочете го към страницата за логин
    if (!isLoggedIn) {
      if (ctx.res) {
        ctx.res.writeHead(302, { Location: '/login' });
        ctx.res.end();
      } else {
        Router.push('/login');
      }
      return {};
    }

    // Ако потребителят е логнат, върнете пропъртитата за компонента на страницата
    const componentProps = WrappedComponent.getInitialProps && (await WrappedComponent.getInitialProps(ctx));
    return { ...componentProps, isLoggedIn };
  };

  return Wrapper;
};

Тук функцията withAuth приема компонент, който да бъде обвит с HOC. Wrapper компонента включва getServerSideProps за проверка на потребителското състояние и при нужда пренасочва потребителя към страницата за логин.

За да използвате HOC за дадена страница, просто обвийте компонента с withAuth, например:

import { withAuth } from '../components/withAuth';

const MyPage = () => {
  return <div>This page requires authentication!</div>;
};

export default withAuth(MyPage);

Така MyPage компонента ще бъде обвит с Wrapper компонента и ще изпълнява проверка на потребителското състояние. Ако потребителят не е логнат, ще бъде пренасочен към страницата за логин, в противен случай ще се зареди страницата.

kirilkirkov/react-high-order-component-auth(HOK).md