Безопасные страницы при входе / выходе AWS Cognito React

Question

Я делаю страницы входа в систему для приложения и впервые использую AWS Cognito и React.Мне нужно защищать свои страницы, пока кто-нибудь не войдет в систему.Я не мог понять, как отправить что-либо из userAuth () в экспорт по умолчанию или как заставить это работать.

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from 'react-router-dom';
import App from '../App';
import { Auth } from 'aws-amplify';
//last thing 333

async function userAuth() {
  let something = Boolean;
  Auth.currentSession()
    .then(function(fulfilled) {
      console.log('worked' + fulfilled);
      something === true;
      return something;
    })
    .catch(function(error) {
      console.log('didnt work' + error);
      window.location.href = '/';
      return error;
    });
}
export default ({ component: C, ...rest }) => (
  alert('this is the user auth ' + userAuth()),
  (
    <Route
      {...rest}
      render={
        props =>
          userAuth() === 'something' ? (
            <Redirect to="/" />
          ) : (
            <C {...props} />
          )
      }
    />
  )
);

Answer 1

Просто исправил проблему и подумал, что это может помочь кому-то, имеющему ту же проблему!

import React from 'react';
import {
  withRouter,
  Switch,
  Route,
  Redirect,
  BrowserRouter as Router
} from 'react-router-dom';
import { Auth } from 'aws-amplify';

class AppliedRoute extends React.Component {
  state = {
    loaded: false,
    isAuthenticated: false
  };
  componentDidMount() {
    this.authenticate();
    this.unlisten = this.props.history.listen(() => {
      Auth.currentAuthenticatedUser()
        .then(user => console.log('user: ', user))
        .catch(() => {
          if (this.state.isAuthenticated)
            this.setState({ isAuthenticated: false });
        });
    });
  }
  componentWillUnmount() {
    this.unlisten();
  }
  authenticate() {
    Auth.currentAuthenticatedUser()
      .then(() => {
        this.setState({ loaded: true, isAuthenticated: true });
      })
      .catch(() => this.props.history.push('/'));
  }
  render() {
    const { component: Component, ...rest } = this.props;
    const { loaded, isAuthenticated } = this.state;
    if (!loaded) return null;
    return (
      <Route
        {...rest}
        render={props => {
          return isAuthenticated ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: '/'
              }}
            />
          );
        }}
      />
    );
  }
}

AppliedRoute = withRouter(AppliedRoute);

export default AppliedRoute;

Answer 2

Auth.currentAuthenticatedUser() - это асинхронный API, поэтому вы не можете вернуть из этого API ничего, что можно использовать в Route (существует возможность возврата Promise, но это на самом деле не нужно.)

Вы можете изменить компонент на class, например:

class PrivateRoute extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      authStatus: false,
      loading: false,
    }
  } 
  componentDidMount() {
    Auth.currentAuthenticatedUser()
      .then((user)=> {
        this.setState({ loading: false, authStatus: true });
      })
      .catch(() => {
        this.setState({ loading: false });
        this.props.history.push('/login');
      });
  }
  render() {
    return <Route {...rest} render={(props) => (
       this.state.authStatus
         ? <Component {...props} />
         : <div>Loading ... </div>
    )} />
  }
}