我试过在/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" });
}
}
);
});
3条答案
按热度按时间e4yzc0pl1#
尝试用AuthContext和当前的授权数据 Package 主组件,这样您就可以在整个元素树中使用它
piah890a2#
有很多不同的方法可以实现这一点,但这里有一篇写得很好的博客:https://kentcdodds.com/blog/authentication-in-react-applications?ck_subscriber_id=1244176450
基本要点是,当您从/login获得响应时,将用户数据保存到上下文中,然后在某个组件中,无论是父组件还是路由组件,您都将检查该用户数据,并根据登录与否呈现相应的页面。
在您的示例中,您只在登录页面的第一次呈现时检查用户是否登录(如果依赖项列表为空,useEffect就是这样工作的),因此它在第一次呈现时被检查,但在用户单击登录按钮时不会再次检查,因此您的历史推送可能永远不会执行。
另一个问题是您的 Jmeter 板页面不受保护。因此,如果用户直接导航到该页面,您的页面将呈现。
zbdgwd5y3#
你应该使用result.render()函数将用户移动到主页。