NextJs 凭据 Auth 具有单独的后端服务器和重定向

Question

想象一下这个场景，在 login 页面上，用户将添加他们的凭据（用户名和密码），这将是 Next api/login 路由，所以 api 会回复一些东西像 {isAuth: true} ，取决于前端页面将收到，只有在这种情况下，它才会进入管理面板，否则它将再次重定向到 login。

目的是防止将应用程序的管理部分泄露给未经身份验证的用户。

这是我到达的一些代码：

登录页面（前端）

 useEffect(() => {
    fetch('api/login')
      .then((res) => res.json())
      .then((data) => 
        if (data.isAuth) {
          router.push('/admin'); <====== Routing FrontEnd
        }
      });
  }, []);

后端API

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ isAuth: true });
}

管理页面（前端）

const Admin: React.FC = () => {
  return (
    <div>
      <h1>Admin</h1>
    </div>
  );
};

export const getServerSideProps: any = () => {
  return {
    redirect: {
      permanent: false,
      destination: '/login'
    }
  };
};

是我所做的保护，我的意思是 router.push 到具有 getServerSideProps 以检查身份验证的管理页面？ router.push 然后 getServerSideProps ?

Answer 1

是的，从 getServerSideProps 重定向将阻止未经身份验证的用户到达 admin 路由。

NextJs 凭据 Auth 具有单独的后端服务器和重定向

NextJs credentials Auth with separate backend server and redirection

authentication

reactjs

next.js