Javascript 如何使用passport检查react组件上的isAuthenticated

我不知道如何从我所处的位置出发。现在我有应用程序运行，所以你可以注册和登录，但我想能够检查他们是否登录删除注册登录在导航，并将其更改为注销。我在谷歌上搜索过，但找不到任何东西。有人能帮我或给我指出正确的方向吗

以下是我的路线：

let express = require("express");
let router = express.Router();
let passport = require("passport");
let LocalStrategy = require("passport-local").Strategy;

let User = require("../../models/User");

// Register User
router.post("/register", function(req, res) {
  let email = req.body.email;
  let name = req.body.name;
  let phonenumber = req.body.phonenumber;
  let password = req.body.password;

  if (!name) {
    console.log("Errors");
  } else {
    //checking for email and username are already taken
    User.findOne(
      {
        email: {
          $regex: "^" + email + "\\b",
          $options: "i"
        }
      },
      function(err, mail) {
        if (mail) {
          res.render("register", {
            mail: mail
          });
        } else {
          let newUser = new User({
            name: name,
            email: email,
            phonenumber: phonenumber,
            password: password
          });

          User.createUser(newUser, function(err, user) {
            if (err) throw err;
            console.log(user);
          });

          req.flash("success_msg", "You are registered and can now login");
          res.redirect("/users/login");
        }
      }
    );
  }
});

passport.use(
  new LocalStrategy(
    {
      usernameField: "email"
    },
    function(username, password, done) {
      User.getUserByUsername(username, function(err, user) {
        if (err) throw err;
        if (!user) {
          return done(null, false, { message: "Unknown User" });
        }

        User.comparePassword(password, user.password, function(err, isMatch) {
          if (err) throw err;
          if (isMatch) {
            return done(null, user);
          } else {
            return done(null, false, {
              message: "Invalid password"
            });
          }
        });
      });
    }
  )
);

passport.serializeUser(function(user, done) {
  done(null, user.id);
});

passport.deserializeUser(function(id, done) {
  User.getUserById(id, function(err, user) {
    done(err, user);
  });
});

router.post(
  "/login",
  passport.authenticate("local", {
    successRedirect: "/YOU_DID_IT_SCRUB",
    failureRedirect: "/YOU_FAILED_SCRUB",
    failureFlash: true
  }),
  function(req, res) {}
);

module.exports = router;

这是我想要显示的登录注销按钮的组件

import React, { Component } from "react";
import {
  Navbar,
  NavbarBrand,
  NavbarItem,
  NavbarEnd,
  Modal,
  ModalCard,
  ModalCardTitle,
  ModalBackground,
  ModalCardFooter,
  ModalCardHeader,
  Delete,
  ModalCardBody
} from "bloomer";
import { Link } from "react-router-dom";
import StepZilla from "react-stepzilla";
import "bulma/css/bulma.css";
import "./Nav.css";
import pad from "./pad.png";
import modal from "./modal.svg";
import { SignUpModal } from "./SignUpModal";
import { LoginModal } from "./LoginModal";
import { MemberType } from "./MemberType";
import API from "../../utils/API";

const padLogo = { image: `url(${pad})` };
const steps = [
  { name: "Step 1", component: <MemberType /> },
  { name: "Step 2", component: <SignUpModal /> }
];

const modalBG = { backgroundImage: `url(${modal})` };

export class Nav extends Component {
  state = {
    modal: "",
    login: ""
  };

  modalOpen = () => {
    this.setState({ modal: "is-active" });
  };

  loginOpen = () => {
    this.setState({ login: "is-active" });
  };

  modalClose = () => {
    this.setState({
      modal: "",
      login: ""
    });
  };

  render() {
    return (
      <Navbar className="navbar">
        <NavbarBrand>
          <NavbarItem className="nav-logo-item">
            <img src={pad} />
          </NavbarItem>
          <NavbarItem>
            <Link to={"/"}>
              <p className="nav-title">Lilypad Rentals</p>
            </Link>
          </NavbarItem>
        </NavbarBrand>
        <NavbarEnd>
          <NavbarItem>
            <Link to={"/property"}>
              <p>Property</p>
            </Link>
          </NavbarItem>
          <NavbarItem>
            <Link to={"/results"}>
              <p>Results</p>
            </Link>
          </NavbarItem>
          <NavbarItem>
            <Link to={"/manager"}>
              <p>Property Form</p>
            </Link>
          </NavbarItem>
          <NavbarItem href="#">
            <p>Create Listing</p>
          </NavbarItem>
          <NavbarItem href="#" onClick={this.loginOpen}>
            <p>Log in</p>
          </NavbarItem>
          <NavbarItem href="#" onClick={this.modalOpen}>
            <p>Sign Up</p>
          </NavbarItem>
        </NavbarEnd>

        <div className="signup-modal">
          <Modal className={this.state.modal}>
            <ModalBackground />
            <ModalCard style={modalBG}>
              <ModalCardBody>
                <Delete onClick={this.modalClose} />

                <div className="step-progress">
                  <StepZilla
                    steps={steps}
                    showSteps={false}
                    nextButtonCls="button is-medium is-primary"
                    backButtonCls="button is-medium is-primary"
                  />
                </div>
              </ModalCardBody>
            </ModalCard>
          </Modal>
        </div>

        <div className="login-modal">
          <Modal className={this.state.login}>
            <ModalBackground />
            <ModalCard>
              <ModalCardHeader>
                <ModalCardTitle />
                <Delete onClick={this.modalClose} />
              </ModalCardHeader>
              <LoginModal />
              <ModalCardFooter hasTextAlign="centered">
                <p>
                  Already have an account? <Link to={""}>Log In</Link> .
                </p>
              </ModalCardFooter>
            </ModalCard>
          </Modal>
        </div>
      </Navbar>
    );
  }
}

import React，{Component}来自“React”；
进口{
导航栏，
纳瓦巴兰，
导航系统，
纳夫巴伦德，
情态动词
莫达卡德，
莫达卡德头衔，
莫达尔巴基德，
ModalCardFooter，
莫达卡德赫德，
删除，
ModalCardBody
}来自“布鲁默”；
从“react router dom”导入{Link}；
从“react StepZilla”导入StepZilla；
导入“bulma/css/bulma.css”；
导入“/Nav.css”；
从“/pad.png”导入pad；
从“/modal.svg”导入模态；
从“/SignUpModal”导入{SignUpModal}；
从“/LoginModal”导入{LoginModal}；
从“/MemberType”导入{MemberType}；
从“../../utils/API”导入API；
const padLogo={image:`url（${pad}）`}；
常数步长=[
{name:“步骤1”，组件：}，
{name:“步骤2”，组件：}
];
const modalBG={backgroundImage:`url（${modal}）`}；
导出类导航扩展组件{
状态={
模态：“，
登录名：“
};
莫达洛彭=（）=>{
this.setState（{modal:“是活动的”}）；
};
loginOpen=（）=>{
this.setState（{login:“是活动的”}）；
};
modalClose=（）=>{
这是我的国家({
模态：“，
登录名：“
});
};
render（）{
返回(
莉莉帕德租赁酒店

财产

结果

财产形式

创建列表

登录

报名


已拥有帐户？请登录。

);
}
}

如果身份验证成功，Passport将创建一个

req.user

对象。您可以使用它来确定用户是否登录

如果验证成功，将调用下一个处理程序，并将req.user属性设置为已验证的用户-

在继续之前，您必须在Express服务器上设置

...
import cookieParser from 'cookie-parser';

app.use(cookieParser({secret: 'mySecret'}));
...

之后，您需要自己在成功回调中创建一个签名cookie

...
router.post(
  "/login",
  passport.authenticate("local", {
     successRedirect: "/YOU_DID_IT_SCRUB",
     failureRedirect: "/YOU_FAILED_SCRUB",
     failureFlash: true
  }),
  function(req, res) {
     // if this gets called then authentication was successful
     res.cookie('session', req.user.id, { secure: true, signed: true, expires: new Date(Date.now() + 3600) });
  });

我建议使用在客户端设置/获取cookies。要解析签名的cookie，只需从“cookie解析器”导入cookieParser，并在React组件中使用

cookieParser.signedCookie（）

方法解析签名的cookie，并确认其在客户端未被篡改

---

在服务器端对用户进行身份验证后，您可以使用创建一个包含用户信息的令牌，以发送到前端

一旦您拥有了该令牌，您就可以通过将令牌存储在本地存储器中，轻松地对React中的用户进行身份验证或取消身份验证。下面是几个简单步骤的示例：

考虑一个

Auth.js

文件

class Auth {

    static authenticateUser(token) {
        localStorage.setItem('token', token)
    }

    static isUserAuthenticated() {
        return localStorage.getItem('token') !== null
    }

    static deauthenticateUser() {
        localStorage.removeItem('token')
    }

    static getToken() {
        return localStorage.getItem('token')
    }
}

export default Auth

在现有的

Nav.js

组件中，检索从服务器端发送的令牌，然后可以执行以下操作：

import Auth from './Auth'
export default class Nav extends Component {

    // authenticate user upon login
    isLoggedIn(token) {
        Auth.authenticateUser(token)
    }

    render() {
        if (Auth.isUserAuthenticated()) {
            return <NavbarItem>Log out</NavbarItem>
        } else {
            return <NavbarItem>Log in</NavbarItem>
        }
    }
}

import Auth from./Auth'
导出默认类Nav扩展组件{
//登录时对用户进行身份验证
伊斯洛格丁（代币）{
身份验证者（令牌）
}
render（）{
if（Auth.isUserAuthenticated（））{
返回注销
}否则{
返回登录
}
}
}