在渲染反应路线之前等待异步 function 的结果

Question

I'm trying to implement a auth service inside my SPA with React in the routes file. When a User try to access some private path, the function should verify if the token inside machine is valid. But I'm getting a problem in this logic, the function is passing false value to private route.

My Route File:

    const Routes = () => {

    var [authedIn, setAuthedIn] = useState(false);
    var authedNow = useRef(authedIn);

    const verifyLog = async () => {
        if (await AuthUser().then(res => res).catch(res => res) === true) {
            setAuthedIn = true;
            authedNow.current = true;
            console.log('log in');
            console.log(authedNow.current);
            return true;
        }
        else {
            setAuthedIn = false;
            authedNow.current = false;
            console.log('log of');
            return false;
        }
    }

    useEffect(() => {
        verifyLog()
    }, [authedNow.current]);

    console.log(authedNow.current);

    return (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={HomeScreen} />
            <Route exact path="/register" component={RegisterScreen} />
            <Route exact path="/login" component={LoginScreen}/>
            <PrivateRouter exact path="/notes" component={NotesScreen} isAuth={authedNow.current}/>
            <PrivateRouter exact path="/users/edit" component={UsersEditScreen} isAuth={authedNow.current}/>
        </Switch>
    </BrowserRouter>
)};

 export default Routes;

AuthUser file:

    const AuthUser = async () => {
    const response = await AuthService.verifyToken();
    if (response.status === 200) {
        return true;
    } else {
        localStorage.clear();
        return false;
    }
}

Is there a way to render after the result of the async function?

Answer 1

To cause a re-render after the async function is complete you need to update state. I am not super knowledgeable on using refs, but you are using the setAuthedIn function incorrectly. You need to call it with a parameter instead of setting it equal to a boolean.

Try changing your verifyLog function to look like this:

const verifyLog = async () => {
    if (await AuthUser().then(res => res).catch(res => res) === true) {
        setAuthedIn(true); // <- call the setter function to update authedIn state
        return true;
    }
    else {
        setAuthedIn(false);
        return false;
    }
} 

Answer 2

since you already return a boolean value from your async await AuthUser , you could simplify verifyLog to:

const verifyLog = async () => {
  const isAuthorized = await AuthUser()
    setAuthedIn(isAuthorized);
    authedNow.current = isAuthorized;
    return isAuthorized;
  }
}

I would suggest to wrap AuthUser into a try catch block, where catch block returns false for consistency.

If it keeps setting a falsey value to state then it would be good to check response.status value.