Javascript react JS中的私有路由jsx

问题：我试图通过

isAuth（）

helpers对用户进行身份验证，但它的行为很奇怪。我希望它查找访问令牌（如果有），或者在刷新令牌可用的情况下从后端调用访问令牌，尽管它工作正常并设置了访问令牌cookie，但问题是如果从

PrivateRoutes.jsx

调用，它根本看不到令牌，并将用户发送到登录页面

为参考添加所需的代码：

isAuth（）：

PrivateRoutes.jsx

import React from "react";
import { Route, Redirect } from "react-router-dom";

import { isAuth } from "../helpers/auth";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuth() ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: "/login", state: { from: props.location } }}
        />
      )
    }
  ></Route>
);

export default PrivateRoute;

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“./helpers/auth”导入{isAuth}；
const privaterout=（{component:component，…rest}）=>(
isAuth（）(
) : (
)
}
>
);
导出默认私有路由；

---

有人能看看这个吗？救命啊

您很可能遇到异步问题，在axios中调用时，

返回true永远不会实际返回到PrivateRoute中的function调用。相反，您需要使用Promise/setState/useffect：

export const isAuth=（）=>{
如果（窗口===未定义）{
返回承诺。解决（错误）；
}否则{
const accessCookieChecked=getCookie（“\u mar\u accounts\u at”）；
const refreshCookieChecked=getCookie（“\u mar\u accounts\u rt”）；
如果（已检查）{
返回承诺。解决（真实）；
}否则如果（刷新检查）{
控制台日志（刷新CookieChecked）；
返回新承诺（解决=>{
axios({
方法：“张贴”，
url:`${API\U url}/API/token`，
数据：{refresh_令牌：refreshCookieChecked}，
})。然后（（res）=>{
控制台日志（res）；
setCookie（“\u mar\u accounts\u at”，res.data.accessToken）；
决心（正确）；
});
})
}否则{
返回承诺。解决（错误）；
}
}
};

import React，{useState，useffect}来自“React”；
从“react router dom”导入{Route，Redirect}；
从“../helpers/auth”导入{isAuth}；
const privaterout=（{component:component，…rest}）=>{
常量[isAuthTrue，setIsAuthTrue]=useState（）；
const[loading，setLoading]=useState（true）；
useffect（（）=>{
isAuth（）。然后（res=>{
setIsAuthTrue（res）；
设置加载（假）；
})
})
返回(
{加载(
某些加载状态
) : (
是真的吗(
) : (
)
}
/>
)}
);
};
导出默认私有路由；
这台机器运行得很好！非常感谢。只需编辑PrivateRoute，因为您正在导入
setState
，而不是
useState
。react也会对同名问题感到困惑。但主要问题解决了，我应该做承诺的功能。非常感谢。很好，谢谢你的编辑
import React from "react";
import { Route, Redirect } from "react-router-dom";

import { isAuth } from "../helpers/auth";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuth() ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: "/login", state: { from: props.location } }}
        />
      )
    }
  ></Route>
);

export default PrivateRoute;