Question

我想向服务器发出一个GET请求，以验证用户是否已通过身份验证，基本上是一个true or false函数。但最终变得比这更复杂。

因为我需要一个async，await函数才能从我制作的response中获得request。所以，那就是我所做的。但是在常规sync函数PrivateRoute中调用该函数后，它仅记录promise仍为pending。

因此，我尝试将PrivateRoute转换为async函数。但反应拒绝呈现[object promise]。

任何想法怎么办？

const isAuthenticated = async () => {
    try{
    let isAuth = await axios.get('/auth')

    console.log(isAuth.data)
    if(Object.keys(isAuth.data).length > 0) return true
    else return false

    } catch(err) {
        console.log(err)
    }
}



const PrivateRoute = (route) => {
  const authenticated = isAuthenticated() // returns a pending promise
  console.log(authenticated)

    return (
      <Route path={route.path} render={() => {
        if (authenticated) return <Profile_Tabs />
          return <Redirect to='/' />
      }} />
    )
}

    <PrivateRoute 
      path='/profile' 
      exact={true}
    />

Answer 1

您可以将PrivateRoute组件设为有状态。

state = {
    isAuthenticated: null,
}

然后您可以在componentDidMount

中执行此操作

isAuthenticated().then(isAuthenticated => this.setState({ isAuthenticated }))

然后可以更新您的渲染功能以检查状态并有条件地进行渲染。

条件路由-异步

1 个答案: