NodeJS 如果用户已登录,如何将用户重定向到页面

ne5o7dgx  于 2023-03-12  发布在  Node.js
关注(0)|答案(3)|浏览(188)

我试过在/dashboard上使用useEffect来检查用户是否登录,但它在将用户重定向回/login页面之前显示 Jmeter 板消息。
/dashboard

function Dashboard() {
    return (
        <div>
            This is Dashboard page.
        </div>
    );

}

export default Dashboard;

/login

const login = (e) => {
        e.preventDefault();
        Axios.post('http://localhost:3001/login', {
            username: username,
            password: password,
        }).then((response) => {
            if (response.data.message) {
                setLoginStatus(response.data.message)
            } else {
                setLoginStatus(response.data[0].username)
            }
        });
    };

    useEffect(() => {
        Axios.get("http://localhost:3001/login").then((response) => {
            if (response.data.loggedIn === true) {
                setLoginStatus(response.data.user[0].username);
                history.push("/dashboard");
            }
        })
    }, [])

server.js

app.get("/login", (req, res) => {
    if (req.session.user) {
        res.send({ loggedIn: true, user: req.session.user })
    } else {
        res.send({ loggedIn: false })
    }
})

app.post("/login", (req, res) => {

    const username = req.body.username;
    const password = req.body.password;

    db.query("SELECT * FROM user WHERE username = ?;", [username],
        (err, result) => {
            if (err) {
                res.send({ err: err });
            }

            if (result.length > 0) {
                bcrypt.compare(password, result[0].password, (err, response) => {
                    if (response) {
                        req.session.user = result;
                        console.log(req.session.user)
                        res.send(result)
                    } else {
                        res.send({ message: "Wrong username/password!" });
                    }
                })
            } else {
                res.send({ message: "User doesn't exist" });
            }
        }
    );
});
e4yzc0pl

e4yzc0pl1#

尝试用AuthContext和当前的授权数据 Package 主组件,这样您就可以在整个元素树中使用它

piah890a

piah890a2#

有很多不同的方法可以实现这一点,但这里有一篇写得很好的博客:https://kentcdodds.com/blog/authentication-in-react-applications?ck_subscriber_id=1244176450
基本要点是,当您从/login获得响应时,将用户数据保存到上下文中,然后在某个组件中,无论是父组件还是路由组件,您都将检查该用户数据,并根据登录与否呈现相应的页面。
在您的示例中,您只在登录页面的第一次呈现时检查用户是否登录(如果依赖项列表为空,useEffect就是这样工作的),因此它在第一次呈现时被检查,但在用户单击登录按钮时不会再次检查,因此您的历史推送可能永远不会执行。
另一个问题是您的 Jmeter 板页面不受保护。因此,如果用户直接导航到该页面,您的页面将呈现。

zbdgwd5y

zbdgwd5y3#

你应该使用result.render()函数将用户移动到主页。

相关问题