Как я могу проверить, эффективнее ли аутентифицируется пользователь в реакции?

Question

В моем защищенном маршруте есть редуктор this.props.auth (возвращает пользователя, если аутентифицирован, или false, если нет). В настоящее время я проверяю, если this.props.auth имеет значение false или в нем есть пользователь. Если false, то перенаправить на /login или, если true, отобразить страницу с данными this.props.auth. В настоящее время я должен переписать логику авторизации для всех компонентов таким же образом. Что было бы лучшим способом сделать проверку подлинности пользователя повторно используемой?

Код защищенного компонента:

class StaffMeetingsPage extends React.Component {
componentDidMount() {
    document.title = "Staff Meetings";
}

renderContent() {
    console.log(this.props.auth)
    switch (this.props.auth) {
        case null:
            return 'still fetching';
        case false:
            return this.props.history.push('/login');;
        default:
            return <div>Logged in</div>;
    }
}

render() {
    console.log(this.props);
    return(
        <div>
            {this.renderContent()}
        </div>
    );
  }
}

function mapStateToProps(state) {
    return {
        auth: state.authenticationProperty
    };
}

export default connect(mapStateToProps)(StaffMeetingsPage);

Запись в консоль this.props.auth при входе в систему:

email: "test@mailtest.com" username: "user" _id: "adasdasdasfe3453" __proto__: Object

Запись в консоль this.props.auth, когда не авторизован:

false

Answer 1

Поскольку у меня недостаточно репутации, чтобы комментировать ответ @ 0xc14m1z, я отвечу на него здесь.

Вы можете отобразить экран загрузки, добавив свойство isLoading в ваше состояние во время выполнения действия.

Примерно так:

return !isLoading?
   (isLoggedIn
       ? <Route { ...props } />
      : <Redirect to="/login" />
    ): <Loading />

Answer 2

Я обычно создаю PrivateRoute компонент, который проверяет, вошел ли пользователь в систему (через prop, redux, localalstorage или что-то еще).

Что-то вроде:

import { Route, Redirect } from 'react-router-dom'

const PrivateRoute = ({ isLoggedIn, ...props }) =>
  isLoggedIn
    ? <Route { ...props } />
    : <Redirect to="/login" />

В вашемЕсли вы можете подключить этот PrivateRoute компонент к той части вашего штата, где вы обрабатываете аутентификацию:

function mapStateToProps(state) {
    return {
        isLoggedIn: !!state.authenticationProperty
    };
}

export default connect(mapStateToProps)(PrivateRoute)

В маршрутизаторе я использую его для моих, ну, в общем, частных маршрутов:)

<Switch>
  <PrivateRoute path="/staff-meetings" component={StaffMeetingsPage} />
  <Route path="/login" component={Login}/>
</Switch>