Express 不会在护照身份验证后重定向

Question

我正在运行使用 express 在端口 5000 上连接服务器，并且我使用 create-react-app 运行端口 3000 上的服务器。要管理身份验证，passport.js.

我使用 http-proxy-middleware 将一些端点代理到 express 服务器。这是我的代码：

setupProxy.js

module.exports = function(app) {
    app.use(
        proxy("/signup", {
            target: "http://localhost:5000",
            changeOrigin: true
        })
    );
}

passport.js

passport.use(
"local-signup",
new LocalStrategy(
    {
        passReqToCallback: true
    },
    async (req, username, password, done) => {
        const existingUser = await User.findOne({
            username: username
        });
        if (existingUser) {
            console.log("User already exists");
            done(null, false);
        } else {
            const user = new User();
            user.username = username;
            user.password = password;
            user.save();
            console.log(user);
            done(null, user);
        }
    }
)

);

App.js

app.post(
    "/signup",
    passport.authenticate("local-signup", {
        successRedirect: "/",
        failureRedirect: "/",
        failureFlash: true
    })
);

Component.js

// some code here

onSubmit(event) {
    event.preventDefault();
    axios
        .post(
            "/signup",
            {
                username: this.state.username,
                password: this.state.password
            },
        )

如果我使用邮递员向 http://localhost:3000/signup 发出请求，它就可以正常工作（我得到打印 "user already exists"，或者创建了一个新的数据库条目并打印了用户信息）。但是，如果我将 Component.js 中的表单与上面提到的 onSubmit 函数一起使用，我将一无所获。我没有被重定向，用户没有被创建。

控制台的网络选项卡指示 http://localhost:3000/signup 代码 302 found（这是有道理的），然后我得到代码 304 not modified 的 http://localhost:3000。

我吓坏了，因为我找不到关于堆栈溢出的任何答案。我已经在这上面好几天了，完全卡住了......任何人都可以给我一些提示吗？

编辑： 感谢你们的帮助，我重构了代码。看来我有所进展，但现在我收到 400 Bad Request。这是我更新的代码：

App.js

app.post(
    "/signup",
    passport.authenticate("local-signup"),
    (req, res, next) => {
        if (req.user) {
            var redir = { redirect: "/" };
            return res.json(redir);
        } else if (!req.user) {
            var redir = { redirect: "/profile" };
            return res.json(redir);
        }
    }
);

Component.js

onSubmit(event) {
    event.preventDefault();
    axios
        .post("/signup", {
            username: this.state.username,
            password: this.state.password
        })
        .then(function(response) {
            if (response.data.redirect == "/") {
                console.log("Success");
                window.location = "/";
            } else if (response.data.redirect == "/profile") {
                console.log("Failed");
                window.location = "/profile";
            }
        })
        .catch(function(error) {
            console.log("Error");
            window.location = "/profile";
        });
}

我被打印出来 "Error"，如果我打印错误，我只会得到 400 Bad Request...

Answer 1

看来我的问题解决了！非常感谢你们！你是最棒的...我终于走出了这个困境

我遵循了 this 很棒的教程，我只是使用了 html 表单而不是 axios post 方法。它刚刚起作用:)

这是我的新（有效）代码：

App.js

app.post(
    "/signup",
    passport.authenticate("local-signup", {
        successRedirect: "/", // redirect to the secure profile section
        failureRedirect: "/profile", // redirect back to the signup page if there is an error
        failureFlash: true // allow flash messages
    })
);

Component.js

const Profile = () => {
return (
    <div>
        <h1>Signup</h1>
        <form action="/signup" method="post">
            <div>
                <label>Username</label>
                <input
                    type="text"
                    className="form-control"
                    name="username"
                />
            </div>
            <div>
                <label>Password</label>
                <input
                    type="text"
                    className="form-control"
                    name="password"
                />
            </div>
            <button type="submit" value="Submit">
                Signup
            </button>
        </form>
    </div>
);

};

Express 不会在护照身份验证后重定向

Express won't redirect after passport authentication

proxy

node.js

express

reactjs

passport.js