Express服务器与React应用程序通信

Question

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

React应用程序在港口3000

服务器位于端口3001

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

身份验证工作正常。我已经用邮递员检查过了。

EXPRESS SERVER

//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...')
})

"REACT APP-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 APP-登录.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

Answer 1

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

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

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

return (
<div>
...
</div>
)
}