小编mrb*_*box的帖子

我想对以下流程使用反应：

• 用户正在做某事
• 用户尝试打开页面所需的身份验证
• 前端向服务器发送请求（即获取某些对象的列表）
• 如果用户通过了身份验证，服务器将用对象列表进行响应，状态将被更新，并且每个人都很高兴
• 如果用户未通过身份验证，服务器将以未经授权的401响应，我想显示登录表单（页面），执行登录并重定向到最初请求的页面

我现在拥有的是：

App.js：

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/login" name="Login Page" component={Login} />
          <Route path="/private" name="Private page" component={PrivatePage}/>
          <Route path="/" name="Home" component={Index} />

        </Switch>
      </BrowserRouter>
    );
  }
}

PrivatePage.js：

import api from '../../api';
class PrivatePage extends Component {
  state = {
    first_name: '',
    last_name: ''
  };
  componentDidMount() {
      api.getProfile().then((res) => { /* this needs to be executed only if status code was 200 */
        this.setState({
          first_name: res.first_name, …