我有 3 个视图,(主页、注册、登录)在 reactJs 中制作,我想在我的项目中使用护照,但我不知道该怎么做,我配置了护照并且它的 url 有效。
我可以做些什么来管理会话和用户数据,就像我们在 ejs 或 jade 中所做的那样?
我有 3 个视图,(主页、注册、登录)在 reactJs 中制作,我想在我的项目中使用护照,但我不知道该怎么做,我配置了护照并且它的 url 有效。
我可以做些什么来管理会话和用户数据,就像我们在 ejs 或 jade 中所做的那样?
客户端示例
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,
  });
});
您可以将passport.js 与node.js 一起使用,也可以使用jsonwebtoken,我个人使用它非常有用,易于编码且非常安全,并且可以轻松地用于带有react 或任何其他前端框架的前端。最好的事情是 后端:-> node.js +passport.js + jsonwebtoken 前端:-> react/任何其他框架+redux 它真的很棒。
您需要创建一个中间件函数来放置代码
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
您将需要通行证,但在具有用户身份验证的后端环境中。node.js+express.js+passport+someDB 的东西。
可能更多一点,你要问什么,但你可以使用feathersjs自带的这些内置module。
使用FeathersCli,您可以通过运行(安装后)立即获得用户/通过 JWToken 的身份验证:
feathers generate app然后feathers generate authentication