使用 React、React Hooks 的私有路由

Question

Trying to make authenticated route using react hooks, with the snippet below, it appears when i refreshed the page while the token is available it doesn't get picked up in the useEffect at the first render. What i'm doing wrong here

 const AuthRoute = ({ component: Component, ...rest }) => { const context = useContext(AuthStateContext) const token = window.localStorage.getItem('token') useEffect(() => { if (token) { context.setLogin() } console.log("TOKEN ->", token) }, []) return ( <Route {...rest} render={props => ( context.isAuthenticated ? <Component {...props} /> : <Redirect to={{ pathname: "/", state: { from: props.location } }} /> )} /> ) }

Answer 1

I assume context.setLogin() will set context.isAuthenticated to true . If that's the case, then it explains.

Callback function of useEffect(callback) is always called asynchronously after each render. As of first render, setLogin() is only called after value of isAuthenticated is read, which at the time of accessing should be false .

So render logic goes to the second branch <Redirect /> which immediately takes user to other place.

To achieve this, you can defer the rendering util state of isAuthenticated is decided.

(Here, I assume you want to check and set isAuthenticated once early up in the rendering tree, then broadcast the isAuthenticated through AuthStateContext object for other parts of the app to notice.)

I suggest this pattern:

const AuthRoute = ({ component: Component, ...rest }) => {
  const context = useContext(AuthStateContext)
  const [authChecked, setAuthChecked] = useState(false)

  useEffect(() => {
    const token = window.localStorage.getItem('token')
    if (token) context.setLogin()
    setAuthChecked(true)
    console.log("TOKEN ->", token)
  }, [])

  if (!authChecked) return null  // <-- the trick! 

  return (
    <Route
      {...rest}
      render={props => (
        context.isAuthenticated ?
          <Component {...props} />
          : <Redirect to={{
            pathname: "/",
            state: { from: props.location }
          }} />
      )}
    />
  )
}

Side note, if context.setLogin() only asynchronously sets the state of isAuthenticated , then you need to add in a callback or promise pattern like

context.setLogin(() => setAuthChecked(true))
// or 
context.setLogin().then(() => setAuthChecked(true))