时间戳

首页 > 解决方案 > 在渲染反应路由之前等待异步函数的结果

javascript - 在渲染反应路由之前等待异步函数的结果

问题描述

我正在尝试在路由文件中使用 React 在我的 SPA 中实现身份验证服务。当用户尝试访问某个私有路径时，该函数应验证机器内的令牌是否有效。但是我在这个逻辑中遇到了一个问题，该函数将错误值传递给私有路由。

我的路线文件：

    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;

验证用户文件：

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

有没有办法在async函数的结果之后渲染？

标签： javascriptreactjsreact-router

解决方案

要在异步功能完成后重新渲染，您需要更新状态。我对使用 refs 不是很了解，但是您setAuthedIn错误地使用了该功能。您需要使用参数调用它，而不是将其设置为布尔值。

尝试将您的verifyLog功能更改为如下所示：

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

推荐阅读