Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 如何同时使用passportjs和reactjs?_Node.js_Reactjs_Passport.js - Fatal编程技术网

Node.js 如何同时使用passportjs和reactjs?

Node.js 如何同时使用passportjs和reactjs?,node.js,reactjs,passport.js,Node.js,Reactjs,Passport.js,我有3个视图,(主页,注册,登录)在reactJs中,我想在我的项目中使用passport,但我不知道怎么做,我已经配置了passport,它的url正在工作 我可以做些什么来管理会话和用户数据,就像我们在ejs或jade中所做的那样 您需要创建一个中间件函数来放置代码 function ensureAuthenticated(req, res, next){ if(req.isAuthenticated()) { return next() } else { res

我有3个视图,(主页,注册,登录)在reactJs中,我想在我的项目中使用passport,但我不知道怎么做,我已经配置了passport,它的url正在工作


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

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

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'  
})

类似于此,您必须向服务器发出ajax请求,或者使用socket.io或websockets,您需要passport,但是在具有用户身份验证的后端环境中。node.js+express.js+passport+someDB

可能比您要求的要多一些,但您可以使用这些内置模块附带的功能

使用JWToken,您可以通过运行(安装后)立即获得用户/通过身份验证:
feathers生成应用程序
然后
feathers生成身份验证

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

  • 使用componentDidMount/useEffect获取身份验证状态。将状态设置为react状态
  • 如果未通过身份验证,则显示登录/注册页面的链接或重定向
  • 如果经过身份验证,您可以返回其他受保护的数据或显示指向受保护页面的链接。(显示私有数据时,请使用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;
app.get("/checkAuthentication", (req, res) => {
  const authenticated: boolean = typeof req.user !== 'undefined'

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