使用 NextJs 保护路由/页面

Question

我建立了一个简单的项目，通过使用 if 和 else 语句保护网站的路由/页面，并为每个页面添加一个函数 withAuth()，但我不确定这是否是最好的方法用 nextjs 保护路由，我注意到保护路由或页面有延迟，比如 2-3 秒长，他们可以在将访问者或未注册用户重定向到登录页面之前看到页面的内容.

有没有办法摆脱它或使请求更快，以便未注册的用户不会查看页面的内容？ nextjs框架中是否有更好的方法来保护某条路由？

代码

---

import { useContext, useEffect } from "react";
import { AuthContext } from "@context/auth";
import Router from "next/router";

const withAuth = (Component) => {
  const Auth = (props) => {
    const { user } = useContext(AuthContext);

    useEffect(() => {
      if (!user) Router.push("/login");
    });

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

  return Auth;
};

export default withAuth;

withAuth 使用示例

import React from "react";
import withAuth from "./withAuth";

function sample() {
  return <div>This is a protected page</div>;
}

export default withAuth(sample);

Answer 1

您可以在服务器端对用户进行身份验证，如果用户已登录，则向他们显示受保护路由的内容 else 重定向他们到其他路线。请参阅this page 了解微尘信息。

在getServerSideProps中检查用户是否登录

   if (!data.username) {
        return {
            redirect: {
                destination: '/accounts/login',
                permanent: false,
            },
        }
    }

这里是受保护路由页面的完整示例

export default function SomeComponent() {
    // some content
}

export async function getServerSideProps({ req }) {

    const { token } = cookie.parse(req.headers.cookie)

    const userRes = await fetch(`${URL}/api/user`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`
        }
    })

    const data = await userRes.json()

    // does not allow access to page if not logged in 
    if (!data.username) {
        return {
            redirect: {
                destination: '/accounts/login',
                permanent: false,
            },
        }
    }

    return {
        props: { data }
    }
}