问题描述
我正在编写客户端代码以使用React和react-router进行身份验证.在下面的代码中,我想检查服务器上的jwt令牌.之后,我将从服务器获取response.data.access
,并将其设置为客户端上的access
变量.但是,即使将true
记录在控制台中,它也会将false
传递到受保护的路由.如何正确设置access
?我猜问题出在异步代码中,调用setAccess
函数时无需等待axios提取.
I'm writing client side code for authentication with React and react-router. In the code below, I want to check jwt token on the server. After that, I'll get response.data.access
from server and I want to set it to access
variable on client. But it seems it passes false
to the protected route even if it logs true
in the console. How can I set access
properly? I guess the problem is in asynchronous code, and setAccess
function is called without waiting for axios to fetch.
// imports
function App() {
const [access, setAccess] = useState(false);
useEffect(() => {
fetch();
}, [access]);
const fetch = async () =>
await axios.get('http://localhost:7000/user/check-token')
.then(response => {
// response.data.access is a boolean variable coming from server
console.log(response.data.access)
setAccess(response.data.access);
});
return (
<Router>
<Switch>
// other routes
<Protected path='/user/dashboard' access={access}>
<Dashboard userData={userData} />
</Protected>
</Switch>
</Router>
);
}
export default App;
这是受保护的路线
const Protected = ({ children, access, ...rest }) => {
return (
<div>
<Route {...rest} render={(props) => (
access === true
? children
: <Redirect to={{
pathname: '/user/login',
state: { from: props.location }
}} />
)} />
</div>
);
}
您能解释一下发生了什么,我该怎么办?
Could you please explain what is happening and what should I do?
推荐答案
我已经解决了这个问题.好吧,我只是添加了一个加载屏幕,以等待一段时间来获取数据,这解决了我的问题.
I have solved this problem. Well, I just added a loading screen to wait some time while data is fetching, and it solved my problem.
const Protected = ({ children, access, ...rest }) => {
return (
<div>
<Route {...rest} render={(props) => {
if (access === null) { // if access is null, the data is still being fetched
return <h1>Loading...</h1> // display loading hardcoded loading screen while it's not fetched
} else {
if (access === true) {
return children
} else {
return <Redirect to={{
pathname: '/user/login',
state: { from: props.location }
}} />
}
}
}} />
</div>
);
}
这篇关于在axios完成获取后,React不会设置状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!