我主要做后端,所以我的javascript并不是全部,但是我正在设计的管理面板中有问题。网站的某些部分只能由某些用户访问。
每次加载受保护的组件时,我都会向REST服务器发送一个请求,该服务器返回200或403,该200响应包含一个名为redirect
的密钥,即False
。所以我的想法是要做以下事情:
...
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> ..... )
现在,如果服务器发回200条以允许用户访问,则将加载组件,但如果没有,则页面将停留在<authenticating>
阶段,并且永远不会停留Redirect
s。
我所有的javascript都是自学的,如果我做的事情对执行此类操作是不好的做法,请让我知道如何正确执行,或者告诉我为什么它不起作用,以便我理解工作。
答案 0 :(得分:3)
您正在使用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
});
})
}
答案 1 :(得分:1)
您可以按如下所示自定义代码以使其正常工作
....
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>
)
}
}
}