मैं अपने पहले एक्सप्रेस बैकएंड रिएक्ट फ्रंटएंड ऐप पर काम कर रहा हूं। वर्तमान में यूजर रजिस्टर/लॉगिन/लॉगआउट सेक्शन पर काम कर रहा है।

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const keys = require('./config/keys')
const passport = require('passport');
const session = require('express-session');
const LocalStrategy = require('passport-local');
// const passportLocalMongoose = require('passport-local-mongoose');
const User = require('./models/User');

const app = express();

// Use BodyParser
app.use(bodyParser.urlencoded({ extended: true }));

// Passport
app.use(passport.initialize());
app.use(passport.session());

app.use(session({
  secret: 'Rusty is the best',
  saveUninitialized: false,
  resave: false
}));

passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

// Connect to the Database
const db = keys.mongoURI
mongoose
  .connect(db, { useNewUrlParser: true })
  .then(() => console.log(`MongoDB connected...`))
  .catch(err => console.log(err));

// Routes
const items = require('./routes/api/items')
app.use('/api/items', items);

// Auth Routes
app.post('/register', function(req, res) {
  User.register(new User({ username: req.body.username }), req.body.password, function(err, user) {
    if (err) {
      console.log(err);
      return res.render('/register');
    }
    passport.authenticate('local')(req, res, function() {
      res.redirect('/secret');
    })
  })
});

app.post('/login', passport.authenticate('local', {
    successRedirect: '/secret',
    failureRedirect: '/login'
  }), function(req, res) {
});

app.get('/logout', function(req, res) {
  req.logout();
  res.redirect('/');
})

// Port and Listen
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on ${port}...`));

मेरे एक्सप्रेस सर्वर.जेएस फ़ाइल के अंत में पोस्ट रूट ठीक काम करते हैं, लेकिन जब मैं ऐप प्राप्त करता हूं तो मुझे समस्याएं होती हैं। प्राप्त करें ('/ लॉगआउट')। मेरा सर्वर 5000 पर चल रहा है और क्लाइंट 3000 पर है। मेरे पास "प्रॉक्सी" है: "http://localhost:5000" मेरे क्लाइंट project.json के अंदर। लोकलहोस्ट: 3000/लॉगआउट एक खाली पेज देता है जबकि लोकलहोस्ट: 5000/लॉगआउट फिर से भेजें संदेश "आपने लॉगआउट पेज हिट किया है" देता है।

क्या कोई व्यक्ति जानता है कि इसे कैसे ठीक किया जाए?

संपादित करें: क्लाइंट रूट कैसे दिखाता है यह दिखाने के लिए मेरा प्रतिक्रिया राउटर यहां दिया गया है:

import React, { Component } from 'react';
import { Route, BrowserRouter } from 'react-router-dom';

import Input from './components/Input';
import SignUp from './components/SignUp';
import Form from './components/Form';
import LogIn from './components/LogIn';
import SignUp2 from './components/SignUp2';
import Profile from './components/Profile';
import Home from './components/Home';
import LogOut from './components/LogOut';


class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route exact path='/' component={ Home } />
          <Route path='/register' component={ SignUp2 } />
          <Route path='/changeThisBackToRegister' component={ SignUp } />
          <Route path='/form' component={ Form } />
          <Route path='/login' component= { LogIn } />
          <Route path='/profile' component = { Profile } />
          <Route path='/secret' component = { Input } />
          <Route path='/logout' component = { LogOut } />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;
1
oolongloop 2 पद 2018, 11:01

1 उत्तर

सबसे बढ़िया उत्तर

json प्रतिक्रिया भेजने के लिए अपनी /logout एपीआई प्रतिक्रिया बदलें।

app.get('/logout', function(req, res) {
  req.logout();
  res.json({success: true});
})

अपने Logout घटक में, घटक के माउंट होने पर /logout कॉल करें।

import React, { Component } from 'react';

export default class Logout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      logoutSuccess: false
    };

  }
  componentDidMount() {
    fetch('/logout')
    .then((response) => response.json())
    .then(() => {
      this.setState({logoutSuccess: true});
    });
  }
  render() {
    const { logoutSuccess } = this.state;
    return (
      <div>
        { logoutSuccess && (<div>Logout Success</div>)}
      </div>
    );
  }
}
0
Dinesh Pandiyan 2 पद 2018, 09:53