Clash Royale CLAN TAG

Conditional Routing - Async

I wanted to make a GET request to my server to verify if the user is authenticated or not, basically a true or false function.
but it ended up being more complicated than that.

GET

true or false

as i need an async,await function in order to get the response from the request i made.
SO, thats what i did. but after calling the function inside a regular sync function which is PrivateRoute it only logs that the promise is still pending.

async

await

response

request

sync

PrivateRoute

promise

pending

SO, i tried turning PrivateRoute into an async function. but react refused to render a [object promise].

PrivateRoute

async

[object promise]

ANY IDEA what to do?

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}
/>


1 Answer
1

You could make the PrivateRoute component stateful.

PrivateRoute

state = {
isAuthenticated: null,
}


You could then do

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


Your render function can then be updated to check the state and conditionally render.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.