NextJS中SSR页面中的安全应用

Question

我正在nextjs中制作SSR页面，但我想使其仅对经过身份验证或登录的用户可用。如何确保SSR在服务器中生成而我不能从本地存储传递令牌。请分享你会怎么做🙏

我目前没有任何上下文如何解决这个问题，请帮助。

Answer 1

根据koolskateguy89的评论，当您向客户端发出访问令牌(JWT)时，您可以添加一个set-cookie头，告诉客户端将JWT添加为cookie。然后，当您从客户端请求您引用的页面时，请确保在请求中包含with credentials属性(尽管如果您使用本机获取api，这可能会有所不同)。

如果您不希望设置cookie，当请求您希望进行身份验证的页面时，您可以传递授权头并使用来自localstorage的令牌，如下所示:

const res = await fetch(/api/authprotected, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${jwt-from-local-storage}`,
},
body: JSON.stringify(data),
});

然后在getServerSideProps中你可以从请求中解析JWT并验证它。

export const getServerSideProps: GetServerSideProps = async (context) => {
const token =
(context.req.headers.authorization as string) ||
(context.req.cookies.jwt as string);
//validate the JWT token here, send error if not auth'd
};

注意:理想情况下，令牌的授权应该在middleware.ts文件中完成。在每一个需要授权逻辑的api路由上都有授权逻辑并不遵循DRY原则