[英]In react, what is the best way to perform an API call and redirect before Render()?
I mostly do backend, so my javascript isn't all that, but I'm having a problem in my admin panel I'm designing. 我主要是在做后端,所以我的javascript并不是全部,但是我正在设计的管理面板中有问题。 Some parts of the site can only be accessed by certain users.
网站的某些部分只能由某些用户访问。
Each time the protected component should load, I send a request to my REST server, which returns back either 200 or a 403, the 200 response contains a key called redirect
, which is False
. 每次加载受保护的组件时,我都会向REST服务器发送一个请求,该服务器返回200或403,该200响应包含一个名为
redirect
的密钥,该密钥为False
。 So my thinking was to do the following: 因此,我的想法是执行以下操作:
...
import { Redirect } from 'react-router-dom';
import axios from 'axios';
class MyProtectedComponent extends Component {
constructor(props) {
super(props);
this.state = {
authCalled: false,
redirect: true,
};
}
componentDidMount() {
console.log("mounting...")
axios.get('<https://url>',
{headers: {"Authorization": localStorage.getItem("token")}})
.then(res => {
this.setState({
redirect: res.data.data.redirect,
authCalled: true,
});
})
}
render() {
if (this.state.authCalled === false) {
return (
<div className="animated fadeIn">
<Row>
<Col>
authenticating...
</Col>
</Row>
</div>
)
}
if (this.state.redirect === true) {
return <Redirect to={{pathname: "/nonauthpage"}} />;
}
return ( ....... <main code> ..... )
Now if the server sends back the 200 for the user is allowed to access, the component loads, but if not, the page gets stuck in the <authenticating>
phase and never Redirect
s. 现在,如果服务器发回200(允许用户访问),则将加载组件,但如果没有,则页面将停留在
<authenticating>
阶段,并且永远不会Redirect
。
All of my javascript is self-taught, If what I'm doing is bad practice for performing this type of thing, please let me know how to properly do it, or show me why this is not working so I get it working. 我所有的JavaScript都是自学成才的,如果我做的事情对执行此类操作是不好的做法,请让我知道如何正确执行此操作,或者告诉我为什么它不起作用,以便使它起作用。
You're using axios which means if the response is not 200 (or 2XX) the then
will not be executed and instead you will need to chain execute a .catch
like below: 您正在使用axios,这意味着如果响应不是200(或2XX),则将不执行
then
,而是需要链式执行.catch
如下所示:
componentDidMount() {
console.log("mounting...")
axios.get('<https://url>',
{headers: {"Authorization": localStorage.getItem("token")}})
.then(res => {
this.setState({
redirect: res.data.data.redirect,
authCalled: true,
});
}).catch(error => {
// You can do additional checks here like e.g. check if the response code is 403 or 401
this.setState({
redirect: true,
authCalled: true
});
})
}
You can customize your code as below to make it works 您可以按以下方式自定义代码以使其正常工作
....
import { Redirect } from 'react-router-dom';
import axios from 'axios';
class MyProtectedComponent extends Component {
constructor(props) {
super(props);
this.state = {
authCalled: false,
redirect: true,
};
}
componentDidMount() {
console.log("mounting...")
axios.get('<https://url>',
{headers: {"Authorization": localStorage.getItem("token")}})
.then(res => {
this.setState({
redirect: res.data.data.redirect,
authCalled: true,
});
}).catch(err => {
this.setState({
redirect: true,
authCalled: true,
});
})
}
render() {
if (this.state.authCalled === true) {
if (this.state.redirect === true) {
return <Redirect to={{pathname: "/nonauthpage"}} />;
} else {
return ( ....... <main code> ..... )
}
}
else {
return (
<div className="animated fadeIn">
<Row>
<Col>
authenticating...
</Col>
</Row>
</div>
)
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.