node.js - 我如何一起使用passportjs和reactjs？

Question

我有 3 个 View ，(主页、注册、登录)是在 reactJs 中制作的，我想在我的项目中使用 Passport ，但我不知道该怎么做，我已经配置了 Passport 并且它的 url 正在工作。

我可以做些什么来管理 session 和用户数据，就像我们在 ejs 或jade 中所做的那样？

Answer 1

• 使用 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,
  });
});