时间戳

首页 > 解决方案 > Express 服务器与 React App 通信

node.js - Express 服务器与 React App 通信

问题描述

我在验证登录后尝试重定向到我的 React 应用程序。但它不起作用，不知道为什么。

React App 在端口3000

服务器在3001端口

我在登录提交时路由到服务器-> 服务器使用护照进行身份验证-> 它应该重定向到 React App 路由'/secured'。相反，它显示GET http://localhost:3001/secured 404 (Not Found) 它正在路由到服务器地址。如何解决这个问题？

身份验证工作正常。我已经使用邮递员检查了所有内容。

快递服务器


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

app.use(cors({
    origin: 'http://localhost:3000', //location of frontend app (react app here)
    credentials: true,
}))

app.use(expressSession({
    secret: 'secret',
    resave: true,
    saveUninitialized: true,
}))

app.use(cookieParser('secret'))
app.use(passport.initialize())
app.use(passport.session())
require('./models/passport-config')(passport)

// routes
app.get('/', (req, res) => {
    res.send('Home route')
})

app.post('/login', (req, res, next) => {
    passport.authenticate('local', (err, user, info) => {
        if (err) { return next(err) }
        if (!user) { return res.redirect('/') }

        req.logIn(user, (err) => {
            if (err) { return next(err) }
            return res.redirect('/secured')
        })

    })(req, res, next)
})

app.post('/register', (req, res) => {
    console.log(req.body)
})
app.get('/user', (req, res) => {
    res.send(req.user)
})

// server init
app.listen(3001, () => {
    console.log('serving at http://localhost:3001...')
})

“反应应用程序 - App.js

import './App.css';
import Register from './components/Register';
import Login from './components/Login';
import {BrowserRouter, Route} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <Route exact path="/" component={Login} />
          <Route path="/secured" component={Register} />
        </div>
      </BrowserRouter>
    </div>
  );
}

export default App;

REACT 应用程序 - Login.js

import React, { Component } from 'react'
import "./login.css"
import axios from 'axios'

class Login extends Component {
    constructor(props) {
        super(props)

        this.state = {
            username: null,
            password: null,
        }
    }

    handleChange = (event) => {
        event.preventDefault()
        this.setState({
            ...this.state,
            [event.target.name]: event.target.value,
        })
    }


    handleSubmit = (event) => {
        event.preventDefault()

        axios({
            method: "post",
            data: this.state,
            withCredentials: true,
            url: 'http://localhost:3001/login'
        })
        // .then(this.getData())

    }

    getData = () => {
        axios({
            method: "get",
            data: this.state,
            withCredentials: true,
            url: 'http://localhost:3001/user'
        }).then(res => {
            this.setState({
                username: res.data['0'].username,
                email: res.data['0'].email,
                password: null
            });
        })
    }

    render() {
        return (
            <div >
                <div>
                    <form id='login' onSubmit={this.handleSubmit}>
                        <div>
                            <h3>Login</h3>
                        </div>
                        <div >
                            <div >
                               
                                <input onChange={this.handleChange} id="icon_prefix" type="text" name='username' />
                                <label htmlFor="icon_prefix">Username</label>
                            </div>
                        </div>
                        <div>
                            <div >
                              
                                <input onChange={this.handleChange} id="icon_prefix" type="password"  name='password' />
                                <label htmlFor="icon_prefix2">Password</label>
                            </div>
                        </div>
                        <div >
                            <div >
                                <input type='submit' />
                            </div>
                        </div>
                    </form>
                    <div>
                        Already a member? <a href="/secured">Register here</a>
                    </div>
                </div>
            </div>

        )
    }

}

export default Login

标签： node.jsreactjsexpresspassport.js

解决方案

在组件的handleSubmit函数中<Login />，您应该添加.then()回调，检查错误/成功的响应，然后在 UI 中向用户显示错误或使用React Router History topush或replace当前路由。

另一种选择可能是在您的<Login />组件中存储一个状态变量，this.state.isAuthenticated然后您可以检查您的render()方法并选择返回一个React Router Redirect，例如：

render() {
  if (this.state.isAuthenticated) {
    return <Redirect to="/somewhere/else" />
  }
  
  return (
    <div>
      ...
    </div>
  )
}

推荐阅读