Question

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

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

Answer 1

您需要创建一个放置代码的中间件功能

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('https://your_url/account', {
  credentials: 'include'  
})

类似的事情，您必须向服务器或通过使用socket.io或websockets发出ajax请求

Answer 2

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

可能比您要的要多得多，但是您可以使用这些内置模块随附的feathersjs。

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

Answer 3

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

Answer 4

使用componentDidMount / useEffect获取身份验证状态。将状态设置为反应状态。
如果未通过身份验证，则显示指向“登录/注册”页面的链接或重定向。
如果已通过身份验证，则可以返回其他受保护的数据或显示指向受保护页面的链接。（显示私有数据时，请使用componentDidMount / useEffect检查每个页面上的身份验证状态）

客户端示例

taints

服务器端示例（如果您设置护照，则必须填写要求的用户）

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;

我如何一起使用passportjs和reactjs？

4 个答案: