Question

用例

我希望在用户尝试访问私人路线时拨打async()的电话。重定向到专用路由时，通常使用同步方法。

这是我使用的代码，但不了解如何使用异步方法。

class PrivateRoute extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isAdmin: null
    };
  }

  componentDidMount() {
    console.log("PrivateRoute");
    verifyUser().then(res => {
      this.setState({
        isAdmin: res
      });
    });
  }

  render() {
    const { component: Component, ...rest } = this.props;
    return (
      <Route
        {...rest}
        render={props =>
          this.state.isAdmin === true ? (
            <InnerLayout>
              <Component {...props} />
            </InnerLayout>
          ) : this.state.isAdmin === null ? (
            <div>Loading...</div>
          ) : (
            <Redirect
              to={{ pathname: "/Login", state: { from: this.props.location } }}
            />
          )
        }
      />
    );
  }
}

export default PrivateRoute;

上述代码的问题是componentDidMount（）调用一次。我检查了React routing and private routes Question，也检查了Authenticate async with react-router-v4 question，但两个答案都对我不起作用。

如果我尝试在渲染中解析Promise，则会显示以下错误：

如何实现该用例？

Answer 1

您可以使用withRouter（https://reacttraining.com/react-router/web/api/withRouter）

class PrivateRoute extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isAdmin: null
        }
    }

    componentDidMount() {
        console.log('PrivateRoute');
        verifyUser().then(res => {
            if(!res){
             this.props.history.push('/Login')
           }else
            this.setState({
                isAdmin: res
            })
        });
    }

    render() {
        const { component: Component, ...rest } = this.props;
       if(this.state.isAdmin === null) return <div>Loading ...</div>
       return <Route {...rest} render={props => <InnerLayout><Component/></InnerLayout>}
    }
}

export default withRouter(PrivateRoute);

Answer 2

我认为您用组件包装路由，然后再次包装路由，尝试为您的代码制作语句并使用不同的方法，而不渲染方法。

<Route {...rest} render={props =>
                this.state.isAdmin === true ? (<InnerLayout><Component {...props} /></InnerLayout>) :
                    (this.state.isAdmin === null ? (<div>Loading...</div>) : 
                        (<Redirect to={{ pathname: '/Login', state: { from: this.props.location } }} />)) }/>
            );

make方法：

verify = () => {

 ... your statement
}

然后调用渲染方法

render () {
return {this.verify()}
}

因为有时关于渲染的声明无法正常工作。

Answer 3

对于我的用例，latest方法效果很好。以下代码已添加，并且对我有用。

gitlab-runner

在给定的链接中，您对https://docs.expo.io/versions/v35.0.0/introduction/managed-vs-bare/#bare-workflow的了解更多。

在React中重定向到Private Route之前如何解决Promise？

3 个答案: