我如何一起使用passportjs和reactjs？

Posted 2023-03-08

【中文标题】我如何一起使用passportjs和reactjs？

【英文标题】：How can I use passportjs and reactjs together?

【发布时间】：2015-07-06 11:53:46

【问题描述】：

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

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

【参考方案1】：

使用 componentDidMount/useEffect 获取身份验证状态。将状态设置为反应状态。 如果未通过身份验证，则显示登录/注册页面的链接或重定向。 如果通过身份验证，您可以返回其他受保护数据或显示指向受保护页面的链接。（显示私有数据时，使用 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;

服务器端示例（如果您设置了护照，则必须填充 req.user）

app.get("/checkAuthentication", (req, res) => 
  const authenticated: boolean = typeof req.user !== 'undefined'

  res.status(200).json(
    authenticated,
  );
);

【参考方案2】：

您可以将 passport.js 与 node.js 一起使用，也可以使用 jsonwebtoken，我个人使用它非常有用，代码简单，非常安全，并且可以轻松地用于前端与 react 或任何其他前端框架。最好的事情是 后端 :-> node.js + passport.js + jsonwebtoken 前端：-> react/任何其他框架+ redux 它真的很棒。

【参考方案3】：

你需要创建一个中间件函数来放置代码

function ensureAuthenticated(req, res, next)
  if(req.isAuthenticated())  
    return next() 
   else 
    res.redirect('/')
  

然后在路由器中使用

app.get('/account', ensureAuthenticated, function(req, res)
  // here return some data
)

从 React 可能你必须做一个 fetch 请求

fetch('https://your_url/account', 
  credentials: 'include'  
)

像这样，你必须向服务器或使用 socket.io 或 websockets 发出 ajax 请求

【参考方案4】：

您需要护照，但需要在具有用户身份验证的后端环境中。 node.js+express.js+passport+someDB 的东西。

可能比您要求的多一点，但您可以使用这些内置模块附带的feathersjs。

使用FeathersCli，您可以通过运行（安装后）立即使用 JWToken 获得用户/通过身份验证： feathers generate app 然后feathers generate authentication