问题
I have a login form which on click calls the following function.
Which summarizing , gets a response from the api, if valid, sets a cookie, and then redirects using the this.props.history.push()
handleSubmit(event) {
event.preventDefault();
const { email, password } = this.state;
axios({
method: 'post',
url: 'http://localhost:3003/login',
data: qs.stringify({ email, password }),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
}).then(res => {
console.log("set cookie")
//the accestoken is set as a cookie in order to check routes
Cookies.set('accesstoken', res.data.accesstoken);
console.log("those are the props")
console.log(this.props);
this.props.history.push('/'); //the bug
}).catch(err => {
console.log(err)
})
}
But the problem im facing is that when I do the first login, the redirect wont work. It sets all the cookies and all that, but it never actually redirects the user to the desired directory. So im forced to redirect myself by typing my desired route in the browser search bar.
This means that once i force myself into the desired directory, if I logout (basically deleting cookies), and try to login again. This time the redirect works.
It will work up until I clear all my cache with ctrl+F5 which happens to cause the same issue I had in the first login, so I had to redirect myself manuall again.
EDIT: This is how my routes look
<BrowserRouter>
<Switch>
<Route exact path="/login" render={(props) => <LoginPage {...props}/>} />
<PrivateRoute authed={this.state.isAuthenticated} exact path="/" render={(props) => <RegisterPage />} />
</Switch>
</BrowserRouter>
And those are my private routes
import { Route } from 'react-router-dom';
import React from 'react'; import { Redirect } from 'react-router';
export default ({ component: Component, render: renderFn, authed, ...rest }) =>{
//The privateroute is fed with the auth state of app.js and evaluates the render based on that . If flase always renders "/"
if (Component){
return (
<Route
{...rest}
render={props =>
authed === true ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
}
/>
)
} else {
return ( //Second case is for iframe based renders
<Route {...rest} render={props => authed === true ? renderFn(props) : <Redirect to={{ pathname: '/login', state: { from: props.location } }} /> } />
);
}
}
EDIT2:
app.js
constructor(props) {
super(props);
console.log("PROPS APPJS")
console.log(props)
//checks if user is autheticated within the system in order to manage routes
this.state = {
authenticationChecked: false,
isAuthenticated: false
}
}
componentDidMount() {
//calls the auth service to decide the auth state value
isAuthenticated().then((result) => {
if (result === true) {
this.setState({ isAuthenticated: true, authenticationChecked: true})
} else {
this.setState({ isAuthenticated: false, authenticationChecked: true})
}
});
}
login = (email, password) => {
var thiscomponent = this;
axios({
method: 'post',
url: 'http://localhost:3003/login',
data: qs.stringify({ email, password }),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
}).then(res => {
console.log("set cookie")
//the accestoken is set as a cookie in order to check routes
Cookies.set('accesstoken', res.data.accesstoken);
console.log("those are the props")
console.log(this.props);
this.setState({ isAuthenticated: true }, () => {
thiscomponent.props.history.push('/'); //the bug
})
}).catch(err => {
console.log(err)
})
}
.
.
.
.
.
.
.
<BrowserRouter>
<Switch>
<PrivateRoute authed={this.state.isAuthenticated} exact path="/" render={(props) => <NewLandingPage login={this.login} {...props} exact />} />
</Switch>
</BrowserRouter>
Login page
handleSubmit(event) {
const { email, password } = this.state;
this.props.login(email, password)
event.preventDefault();
}
EDIT: login page props
{"history":{"length":15,"action":"POP","location":{"pathname":"/login","search":"?email=test4%40test.com&password=test","hash":""}},"location":{"pathname":"/login","search":"?email=test4%40test.com&password=test","hash":""},"match":{"path":"/login","url":"/login","isExact":true,"params":{}}}
回答1:
Where and when do you set isAuthenticated? – lehm.ro 7 mins ago
@lehm.ro in my app.js during the componentDidMount(), default isAuthenticated is false – mouchin777 6 mins ago
And then once you redirect you have to use this.setState to make it true, otherwise your private route won't show. But for that you need to pass the true state up to app.js and then trigger a function to setState for isAuthenticated true, then redirect to that route
Setup your history to work in app.js without being passed by props: Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)
In order to make use of
historyin theAppcomponent use it withwithRouter. You need to make use ofwithRouteronly when your component is not receiving theRouter props,This may happen in cases when your component is a nested child of a component rendered by the Router or you haven't passed the Router props to it or when the component is not linked to the Router at all and is rendered as a separate component from the Routes.
import React from 'react'; import { Route , withRouter} from 'react-router-dom'; import Dashboard from './Dashboard'; import Bldgs from './Bldgs'; var selectedTab; class App extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); selectedTab = 0; } handleClick(value) { selectedTab = value; // console.log(selectedTab); this.props.history.push('/Bldgs'); // console.log(this.props); } render() { var _this = this; return ( <div> <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} /> <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} /> </div> ); } } export default withRouter(App);[Documentation][1] on withRouter
[1]: https://reacttraining.com/react-router/web/api/withRouter
Change in App.js
<Route exact path="/login" render={(props) => <LoginPage login={this.login} {...props} />} />
and add
login = (email, password) => {
var thiscomponent = this;
axios({
method: 'post',
url: 'http://localhost:3003/login',
data: qs.stringify({ email, password }),
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
}).then(res => {
console.log("set cookie")
//the accestoken is set as a cookie in order to check routes
Cookies.set('accesstoken', res.data.accesstoken);
console.log("those are the props")
console.log(this.props);
this.setState({ isAuthenticated: true }, () => {
thiscomponent.props.history.push('/'); //the bug
})
}).catch(err => {
console.log(err)
})
}
and in LoginPage
handleSubmit(event) {
const { email, password } = this.state;
this.props.login(email, password)
event.preventDefault();
}
来源：https://stackoverflow.com/questions/59859747/react-not-redirecting-after-first-login-but-redirects-after-forcefully-redirect