时间戳

首页 > 解决方案 > 护照认证后快递不会重定向

node.js - 护照认证后快递不会重定向

问题描述

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

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

setupProxy.js

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

护照.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);
        }
    }
)

);

应用程序.js

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

组件.js

// some code here

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

如果我请求http://localhost:3000/signup使用邮递员，它就可以工作（我打印“用户已经存在”，或者创建了一个新的数据库条目并打印了用户信息）。但是如果我在Component.js上面提到的 onSubmit 函数中使用表单，我什么也得不到。我没有被重定向，用户没有被创建。

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

我吓坏了，因为我找不到堆栈溢出的任何答案。我已经坚持了好几天了，完全被卡住了......谁能给我一个关于发生了什么的提示？

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

应用程序.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);
        }
    }
);

组件.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";
        });
}

我打印出“错误”，如果我打印错误，我只会收到 400 Bad Request...

标签： node.jsreactjsexpressproxypassport.js

解决方案

看来我解决了我的问题！非常感谢你们！你是最棒的... 终于我离开了这个被困的地方。

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

这是我的新（工作）代码：

应用程序.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
    })
);

组件.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>
);

};

推荐阅读