主页 / 问题 / 1127444
Accepted
Артур Франк
Asked:2020-05-18 18:46:47 +0000 UTC2020-05-18 18:46:47 +0000 UTC

Next.js 路由器将站点分为 2 个主要分支并使用密码保护其中一个

  • 772

我在站点上路由到两个主要分支“/”和“/admin/”时遇到了问题（对我来说是个问题），此外，我需要使用登录名和密码保护整个 admin 分支。我根本没有找到任何关于这个主题的文章，这就是我在这里写的原因。告诉我如何正确地做，或分享文章。我会非常感谢！

PS。API 已经实现。需要授权的分支，它会给出错误。所以这里是如何使用代码在整个 admin 分支周围包装一些东西，该代码检查 cookie 中是否存在令牌，如果不存在，则重定向到授权，如果有对 api 的正确性请求，等等. 这可以在 admin 文件夹中的每个文件上抛出，但它看起来很愚蠢。

reactjs

1 个回答

  1. Best Answer

    注意 - 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>
  )
}
    • 1

相关问题