使用 next-iron-session 的“withIronSession"使用 Next.JS 执行简单的身份验证 [英] Using next-iron-session's "withIronSession" with Next.JS to perform simple authentication

问题描述

所以我有一个非常简单的 Next.js 应用程序，我想使用 next-iron-session 和 withIronSession 函数添加身份验证.在我的 api 文件夹中，我有一个简单的组件，用于获取登录表单数据，执行复杂的身份验证操作，然后使用

设置用户

req.session.set("user", { email });

import { withIronSession } from next-iron-session";const VALID_EMAIL = 用户"；const VALID_PASSWORD =密码"；使用IronSession导出默认值(异步 (req, res) =>{if (req.method === "POST") {const { 电子邮件，密码 } = req.body;如果(电子邮件 === VALID_EMAIL && 密码 === VALID_PASSWORD){req.session.set(用户"，{电子邮件})；等待 req.session.save();console.log(req.session.get());返回 res.status(201).send("");}返回 res.status(403).send("");}返回 res.status(404).send("");},{cookieName: "MYSITECOOKIE",密码:'2gyZ3GDw3LHZQKDhPmPDL3sjREVRXPr8'});

在会话中设置用户后，我返回 201，并且客户端重定向到我的受保护页面，在那里我尝试使用 withIronSession 作为包装器在 getServerSideProps 函数中获取该用户.

import { withIronSession } from next-iron-session";导出 const getServerSideProps = withIronSession(异步 ({ req, res }) =>{const user = req.session.get(用户");控制台日志(用户)；如果(！用户){res.statusCode = 403;重发();返回{道具:{}}；}返回 {道具: { }};},{cookieName: 'MYSITECOOKIE',密码:2gyZ3GDw3LHZQKDhPmPDL3sjREVRXPr8"});

然而，即使在设置 API 函数后找到用户({user"，{ email }})，同一个会话对象在我受保护组件的 getServerSideProps 函数中返回 {}，它在我的情况下总是导致 403.有没有办法访问在 getServerSideProps 函数的登录组件中设置的用户?

注意*我正在尝试关注这篇文章，也许它提供了更多信息.

https://dev.to/chrsgrrtt/easy-user-authentication-with-next-js-18oe

解决方案

next-iron-session 与 node 版本一起使用 >12. 它对我有用.

从反应"导入反应；从next-iron-session"导入 { withIronSession };const PrivatePage = ({用户}) =>(<div><h1>你好 {user.email}</h1><p>这里住着秘密……</p>

);导出 const getServerSideProps = withIronSession(异步 ({ req, res }) =>{const user = req.session.get(用户");如果(！用户){res.statusCode = 404;重发();返回{道具:{}}；}返回 {道具:{用户}};},{cookieName: "MYSITECOOKIE",cookie 选项:{安全:process.env.NODE_ENV ===生产"；?真假},密码:process.env.APPLICATION_SECRET});导出默认的 PrivatePage；

So I have a very simple Next.js application that I would like to add authentication to using next-iron-session and the withIronSession function. Inside of my api folder, I have a simple component that grabs the login form data, performs a complex authentication action, then sets the user using

req.session.set("user", { email });

import { withIronSession } from "next-iron-session";

const VALID_EMAIL = "user";
const VALID_PASSWORD = "password";

export default withIronSession(
  async (req, res) => {
    if (req.method === "POST") {
      const { email, password } = req.body;

      if (email === VALID_EMAIL && password === VALID_PASSWORD) {
        req.session.set("user", { email });
        await req.session.save();
        console.log(req.session.get());
        return res.status(201).send("");
      }

      return res.status(403).send("");
    }

    return res.status(404).send("");
  },
  {
    cookieName: "MYSITECOOKIE",
    password: '2gyZ3GDw3LHZQKDhPmPDL3sjREVRXPr8'
  }
);

After the user is set in the session, I return a 201, and the client redirects to my protected page, where I try to grab that user in the getServerSideProps function using the withIronSession as a wrapper.

import { withIronSession } from "next-iron-session";

export const getServerSideProps = withIronSession(
    async ({ req, res }) => {
      const user = req.session.get("user");

      console.log(user);
  
      if (!user) {
        res.statusCode = 403;
        res.end();
        return { props: {} };
      }
  
      return {
        props: { }
      };
    },
    {
        cookieName: 'MYSITECOOKIE',
        password: "2gyZ3GDw3LHZQKDhPmPDL3sjREVRXPr8"
    }
  );

However, even though the user is found in the API function after it is set, ({"user", { email }}), that same session object returns {} in the getServerSideProps function in my protected component, which in my case always results in a 403. Is there a way to access the user that is set in the login component in the getServerSideProps function?

Note* I was trying to follow this article, maybe it provides more information.

https://dev.to/chrsgrrtt/easy-user-authentication-with-next-js-18oe

解决方案

next-iron-session works with node version > 12. It worked for me.

import React from "react";
import { withIronSession } from "next-iron-session";

const PrivatePage = ({ user }) => (
  <div>
    <h1>Hello {user.email}</h1>
    <p>Secret things live here...</p>
  </div>
);

export const getServerSideProps = withIronSession(
  async ({ req, res }) => {
    const user = req.session.get("user");

    if (!user) {
      res.statusCode = 404;
      res.end();
      return { props: {} };
    }

    return {
      props: { user }
    };
  },
  {
    cookieName: "MYSITECOOKIE",
    cookieOptions: {
      secure: process.env.NODE_ENV === "production" ? true : false
    },
    password: process.env.APPLICATION_SECRET
  }
);

export default PrivatePage;

这篇关于使用 next-iron-session 的“withIronSession"使用 Next.JS 执行简单的身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！