Question

如何将Passport JS与React Router集成。

我正在使用Passport.JS通过webpack / babel通过Facebook进行身份验证。

server.babel.js

'use strict';

import express from 'express';
import mongodb from 'mongodb';
import mongoose from 'mongoose';
import bodyParser from 'body-parser';
import mongoosePaginate from 'mongoose-paginate';
import passport from 'passport';
import cookieParser from 'cookie-parser';
import session from 'express-session';
import node_acl from 'acl';
import methodOverride from 'method-override';
import localStrategy from 'passport-local';
import expressValidator from 'express-validator';
import FacebookStrategy from 'passport-facebook';
import findOrCreate from 'mongoose-findorcreate';

import path from 'path';

const port = 3000;
const app = express();

app.use(cookieParser('test'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(session({
    secret: 'test',
    resave: true,
    saveUninitialized: false
}));
app.use(passport.initialize());
app.use(passport.session());

const Schema = mongoose.Schema, ObjectId = Schema.ObjectId;

mongoose.Promise = global.Promise;

mongoose.connect('mongodb://localhost:27017/test')
  .then(() =>  console.log('connection succesful'))
  .catch((err) => console.error(err));  


const usersSchema = new Schema({
    username: String
});

usersSchema.plugin(findOrCreate);
usersSchema.plugin(mongoosePaginate);

const users = mongoose.model('users', usersSchema);

const FACEBOOK_APP_ID = 'test';
const FACEBOOK_APP_SECRET = 'test';

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

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

passport.use(new FacebookStrategy({
    clientID: FACEBOOK_APP_ID,
    clientSecret: FACEBOOK_APP_SECRET,
    callbackURL: "http://localhost:3000/auth/facebook/callback"
  },
  function(accessToken, refreshToken, profile, cb, done) {
      users.findOrCreate({ username: profile.id }, function (err, user) {
        if (err) { return done(err); }
        done(null,profile);
      });
  }
));

app.use(function (req, res, next) {
  res.locals.user = req.user || null;
  next();
});

app.get('/auth/facebook', passport.authenticate('facebook', {session: true}));

app.get('/auth/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/error' }), function(req, res) {
    res.redirect('/');
});


app.use('/', express.static('public'));

//Always return the main index.html, so react-router render the route in the client
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'public', 'index.html'));
});

function isAuthenticated(req, res, next) {
  console.log('User: '+ req.user);
    if (req.user) {
        next();
    } else {
        res.redirect('/login');
    }
}

app.listen(port, function() {
    console.log("Server Started at port 3000");
});

然后我通过以下方式导入路线： index.jsx

import React from "react"
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom"

import SplashView from './views/SplashView';

const App = () => (
    <Router>
      <div className="wrapper">
        <Route exact path="/" component={SplashView} />
      </div>
    </Router>
)

ReactDOM.render(
  App(),
  document.getElementById('app')
)

使用Passport.JS会话限制反应路由器路由的首选方法是什么。如何从index.jsx文件访问isAuthenticated函数？

我已经看到其他人创建/ isauth终结点的示例，但是在每个页面请求中从客户端发出请求似乎都很紧张。

我还看到了其他一些示例，其中人们使用.ejs渲染server.js文件中的块，但如果可能的话，我宁愿使用react router。

我想的是passport.js会话吗？还是应该同时使用JWT？

我要用完全错误的方式来处理这个问题吗？

React Router + Passport JS会话

0 个答案: