Next.js Router разделение сайта на 2 основные ветки и защита паролем одной из них

Question

Столкнулся с проблемой ( ну для меня проблема ) с роутингом на сайте на две основные ветки "/" и "/admin/" к тому же всю ветку admin мне надо защитить логином и паролем. Статей по этому поводу я не нашел совершенно, поэтому и пишу сюда. Подскажите как сделать это правильно, или поделитесь статьей. Буду очень благодарен!

PS. api у меня уже реализована. Ветки там где нужна авторизация он выдает ошибку. так вот как обернуть что-ли всю ветку admin кодом который проверяет наличие токена в куках, если его нет то переадрисация на авторизацию, если есть то запрос к api на корректность ну и тд. Это можно кидать на каждый файл в папке admin но выглядит это стремно.

Answer 1

На заметку - в next.js свой роутер, поэтому от react-router вам лучше отказаться.

Чтобы реализовать авторизацию нужно обрабатывать запрос на сервере с помощью getServerSideProps:

function Page({ data }) {
  // Результат getServerSideProps
  if (!data.isAdmin) {
     location.href = '/authorization'
     return null
  }

  return 'Администраторская часть'
}

export async function getServerSideProps() {
  // Проверяем авторизацию
  const res = await fetch(`smth`)
  const data = await res.json()

  // Отправляем результат компоненту
  return { props: { data } }
}

export default Page

Вообще защищать нужно API, а не страницы.

// children - это ваша страница

function Layout({ children }) {
  // сюда загружаете профиль запросом к апи
  const [profile] = useState(null)

  useEffect(() => {
    // загружаем профиль
    // setProfile(результат)
  }, [])

  // Всё это оборачиваете в контекст
  return (
    <div>
      <div>хедер</div>
      <div>{children}</div>
      <div>футер</div>
    </div>
  )
}

function Page1() {
  return (
    <Layout>
      <div>Главная</div>
    </Layout>
  )
}
function Page2() {
  return (
    <Layout>
      <div>Админка</div>
    </Layout>
  )
}

БЛОГ НА HUSL

Next.js Router разделение сайта на 2 основные ветки и защита паролем одной из них

Ответы (1 шт):