我有 3 个 View ,(主页、注册、登录)是在 reactJs 中制作的,我想在我的项目中使用 Passport ,但我不知道该怎么做,我已经配置了 Passport 并且它的 url 正在工作。
我可以做些什么来管理 session 和用户数据,就像我们在 ejs 或jade 中所做的那样?
最佳答案
- 使用 componentDidMount/useEffect 获取身份验证状态。将状态设置为 react 状态。
- 如果未通过身份验证,则显示登录/注册页面的链接或重定向。
- 如果通过身份验证,您可以返回其他 protected 数据或显示指向 protected 页面的链接。(显示私有(private)数据时,使用 componentDidMount/useEffect 检查每个页面的身份验证状态)
客户端示例
import React, { useEffect, useState } from 'react';
import { Link } from "react-router-dom";
import axios from 'axios';
function Home() {
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
axios.get('/checkAuthentication')
.then(res => {
setLoggedIn(res.data.authenticated);
})
.catch((error) => {
setLoggedIn(false)
});
}, []);
return (
<div>
{loggedIn ? (
<p>Login success</p>
) : (
<div>
<Link to="/signup">
Signup
</Link>
<Link to="/login">
Login
</Link>
</div>
)}
</div>
);
}
export default Home;
服务器端示例(如果您设置了 Passport ,则必须填充 req.user)
app.get("/checkAuthentication", (req, res) => {
const authenticated: boolean = typeof req.user !== 'undefined'
res.status(200).json({
authenticated,
});
});
关于node.js - 我如何一起使用passportjs和reactjs?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29905729/