ReactJS + NodeJS: Как разделить маршруты для приложения и для API? - PullRequest
Новая
       6

ReactJS + NodeJS: Как разделить маршруты для приложения и для API?

0 голосов
/ 30 октября 2018

У меня есть приложение React, серверная часть NodeJS. Я изо всех сил пытаюсь разделить маршруты для приложения веб-сайта (например, website.com/home или website.com/about) и URL-адреса, которые будут конечными точками, содержащими данные JSON (например, website.com/v1/users или website.com/v1/tournaments).

Это мой app.js: 

const PORT = process.env.PORT || 5000;
const env = process.env.NODE_ENV || 'development';

const express = require('express'),
      path = require('path'),
      mongoose = require('mongoose'),
      bodyParser = require('body-parser'),
      passport = require('passport');

const config = require('./backend/config/db')[env]; // load db
mongoose.connect(config.DB, { useNewUrlParser: true }).then(
    () => {console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err)}
);

const users = require('./backend/routes/user'); 
const v1 = require('./backend/routes/v1'); 

const app = express();

// Serve static files from the React app -- added because of Heroku, the local app doesn't need this
app.use(express.static(path.join(__dirname, 'frontend/build')));


app.use(passport.initialize());
require('./backend/passport')(passport);

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// routes
app.use('/api/users', users);
app.use('/v1', v1);

app.get('/', function(req, res) {
    res.send('hello');
});

app.listen(PORT, () => {
    console.log(`Server is running on PORT ${PORT}`);
});

Затем в папке веб-интерфейса React у меня есть файл App.js, который выглядит следующим образом: 

// react logic
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

// redus
import { Provider } from 'react-redux';
import store from './redux/store';

// authentication
import jwt_decode from 'jwt-decode';
import setAuthToken from './setAuthToken';
import { setCurrentUser, logoutUser } from './redux/actions/authentication';

// pages
import Navbar from './components/Navbar';
import Register from './components/Register';
import Login from './components/Login';
import Home from './components/Home';
import About from './components/About';
//import ApiV1 from './components/ApiV1';

// css
import 'bootstrap/dist/css/bootstrap.min.css';

if(localStorage.jwtToken) {
  setAuthToken(localStorage.jwtToken);
  const decoded = jwt_decode(localStorage.jwtToken);
  store.dispatch(setCurrentUser(decoded));

  const currentTime = Date.now() / 1000;
  if(decoded.exp < currentTime) {
    store.dispatch(logoutUser());
    window.location.href = '/login'
  }
}

export default class App extends Component {
    render() {
      return (
          <Provider store = { store }>
            <Router>
              <div>
                <Navbar />
                <Route exact path="/" component={ Home } />
                <div className="container">
                    <Route exact path="/home" component={ Home } />
                    <Route exact path="/about" component={ About } />
                    {/* <Route exact path="/v1" component={ ApiV1 } /> */}
                </div>
              </div>
            </Router>
          </Provider>
        );
    }
}

Когда я помещаю в браузер URL website.com/v1/users, все, что я вижу, это макет внешнего интерфейса React, а не нужный файл JSON, содержащий данные из базы данных.

Как мне нужно изменить файл route / Node's app.js, чтобы добиться этого?

Заранее спасибо.

EDIT:

backend/routes/v1.js 

const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const passport = require('passport');

const User = require('../models/User');

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

router.get('/v1', passport.authenticate('jwt'), function(req, res, next) {
    console.log('in /v1');

    User.find({}).sort('-createdAt').exec(function(err, fetched_users) {
        if(err) throw err;
        let users = {
            users: fetched_users
        };
        res.json(users);
    });    
});

module.exports = router;
...