我相信这是一个非常简单的问题，但我不习惯异步/回调世界。
我制作else 10是为了保护我的资源不被未经身份验证的用户拍摄。如果我只检查存储中的PrivateRoute。它通常会推动资源。但它没有涵盖过时的token。然后，我继续拍摄以进行后端验证。
问题：
token调用返回我的corret值，但是页面不会将经过身份验证的用户推送到正确的资源页面
axios向我显示1 console.log并留在登录页面
then
App.js 问题：
我如何让它像顺序一样运行？
答案：
感谢const PrivateRoute = ({component: Component, isAuthorized, ...otherProps}) => (
<Route
{...otherProps}
render={props => (
isAuthorized() ? (<Component {...props} />) :
(
<Redirect to={
{
pathname: '/',
state: {from: props.location},
}
}
/>
)
)}
/>
);
function verifyToken(isAuthenticated){
if (isAuthenticated) {
axios.post(`${BACKEND_URL}/api-token-verify/`, {
token: getAuthToken()
}).then((res) => {
console.log('then');
return true;
})
.catch((err) => {
console.log('err');
return false;
});
} else {
console.log('ahaha');
return false;
}
}
// Deal with an ordinary outdated token. Hacked one will be handle on individual component
function hasToken() {
const token = localStorage.getItem('authToken');
const isAuthenticated = !((token === undefined) | (token === null));
return verifyToken(isAuthenticated);
}
class App extends Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route exact path='/' component={Login}/>
<PrivateRoute exact path='/simulator/' isAuthorized={hasToken} component={Simulator}/>
</Switch>
</BrowserRouter>
</Provider>
)
}
}
export default App;
他的回答和评论解决了我的问题。这是我的解决方案基于他的答案。我决定把我的解决方案放在这里，因为将来我可能会忘记它。
我制作新m0meni并将其命名为Component。因为我无法将Container置于此级别。
redux class App extends Component {
render() {
return (
<Provider store={store}>
<Container/>
</Provider>
)
}
}
Container.js import React, {Component, Fragment} from 'react';
import {BrowserRouter, Redirect, Route, Switch} from 'react-router-dom';
import Simulator from "../../simulators/components/Simulators";
import Login from "../../frontpage/components/login";
import {connect} from 'react-redux';
import {CHECK_TOKEN} from "../../constants";
const PrivateRoute = ({component: Component, isAuthorized, ...otherProps}) => (
<Route
{...otherProps}
render={props => (
isAuthorized() ? (<Component {...props} />) :
(
<Redirect to={
{
pathname: '/',
state: {from: props.location},
}
}
/>
)
)}
/>
);
// Deal with an ordinary outdated token. Hacked one will be handle on individual component
function hasToken() {
const token = localStorage.getItem('authToken');
return !((token === undefined) | (token === null));
}
class Container extends Component {
/*
* In order to do redux staff and not to mess up with top most <App/>
* Container has been created to contain them all
*
* */
constructor(props) {
super(props);
this.props.validateToken();
}
render() {
console.log(this.props);
const {isAuthenticated, wrapper} = this.props;
console.log(typeof this.props.wrapper);
if((typeof this.props.wrapper) === 'function') {
console.log('this is function');
return (
<Fragment>
<BrowserRouter>
<Switch>
<Route exact path='/' component={Login}/>
<PrivateRoute exact path='/simulator/' isAuthorized={this.props.wrapper} component={Simulator}/>
</Switch>
</BrowserRouter>
</Fragment>
)
}else{
console.log('wrapper is not a function');
console.log(typeof this.props.wrapper);
return null;
}
}
}
const mapStateToProps = ({verifyTokenReducer}, ownProps) => {
return verifyTokenReducer
};
const validateToken = () => {
return {
type: CHECK_TOKEN,
payload: undefined
}
};
export default connect(mapStateToProps, {validateToken})(Container);
reducers.js答案 0 :(得分：1)
这里的关键见解是verifyToken 永远不会返回true，因为if分支不返回任何内容，而else分支返回false。您的承诺中的return true位于.then内部的回调中，这意味着return true不适用于函数verifyToken，而是.then内的匿名函数1}}。
为了解决这个问题，您需要从verifyToken函数返回promise，并将其作为PrivateRoute组件中的promise进行处理。现在你的渲染道具将承诺看作是一个立即可用的值而不是一个承诺。 （你没有在任何地方使用.then）
render={props => (
isAuthorized() ? (<Component {...props} />) :
(
<Redirect to={
{
pathname: '/',
state: {from: props.location},
}
}
/>
)
)}