Question

我正在尝试使用路由文件中的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;

AuthUser文件：

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

有没有一种方法可以在async函数的结果之后进行渲染？

Answer 1

要在异步功能完成后引起重新渲染，您需要更新状态。我不擅长使用ref，但是您错误地使用了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;
    }
}

Answer 2

由于您已经从异步等待AuthUser返回了布尔值，因此可以将verifyLog简化为：

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

我建议将AuthUser包装到try catch块中，其中catch块为一致性返回false。

如果它始终将false值设置为state，那么最好检查response.status值。

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

2 个答案: