如何使用护照检查反应组件上的isAuthenticated

Question

我无法弄清楚如何从我所在的位置开始。现在我的应用程序正在运行，因此您可以注册并登录，但我希望能够通过删除导航中的注册登录并将其更改为注销来检查他们是否已登录。我在 Google 上四处搜索，但找不到任何人可以帮助我或为我指明正确的方向吗？

这是我的路线：

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

Answer 1

如果身份验证成功，Passport 会创建一个req.user 对象。您可以使用它来确定用户是否已登录。

如果身份验证成功，将调用下一个处理程序并将 req.user 属性设置为经过身份验证的用户 - http://www.passportjs.org/docs/authenticate/

在继续之前，您必须在 Express 服务器上设置 cookie-parser middleware。

...
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) });
  });

我建议使用react-cookie 在客户端设置/获取cookie。要解析签名的 cookie，只需 import cookieParser from 'cookie-parser' 并在 React 组件中使用 cookieParser.signedCookie() 方法来解析签名的 cookie 并确认它没有在客户端被篡改。

res.cookie reference

Answer 2

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

一旦你有了它，你可以通过将令牌存储在本地存储中来轻松地在 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>
        }
    }
}