Casper-SC
@Casper-SC
.NET программист

Как в React лучше делать функционал, общий для компонентов страниц?

Хочу сделать базовый класс, который умеет редиректить со страниц, если нет прав администратора или не залогинены. Написал такие классы и получилось наследование, которого, вроде как, рекомендуют избегать. Это норм подход в JavaScript и React? Если нет, то как лучше сделать? По канонам, чтобы было.

import React from 'react';
import { Redirect } from 'react-router-dom';

class PageBase extends React.Component {
    constructor(props) {
        super(props);
    }

    redirectIfNotLoggedIn() {
        if (!this.props.appAuthContext.isUserLoggedIn()) {
            return <Redirect to="/login"/>;
        }
    }
}

class AdminPageBase extends PageBase {
    constructor(props) {
        super(props);
    }
    
    redirectIfNoAdministratorPrivileges() { 
        if (!this.props.appAuthContext.isUserAdmin()) {
            return <Redirect to="/"/>;
        }
    }
}

export {
    AdminPageBase,
    PageBase
}


import React from 'react';

import withAppAuth from "../../components/hoc-helpers/with-app-auth";
import withServerApi from "../../components/hoc-helpers/with-server-api-service";
import compose from "../../components/hoc-helpers/compose";

import { AdminPageBase } from "./admin-page-base";
import { Link } from "react-router-dom";

class Admin extends AdminPageBase {
    constructor(props) {
        super(props);

        this.state = {
            //isLoading: false,
        }
    }

    componentDidMount() {
        super.redirectIfNotLoggedIn();
        super.redirectIfNoAdministratorPrivileges();
    }

    render() {
        return (
            <div className="row d-flex align-items-to-the-top-border">
                <div className="col">
                    <div className="row">
                        <div className="col">
                            <Link className="badge badge-primary" to="/admin/users">Users</Link>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default compose(
    withAppAuth(),
    withServerApi()
)(Admin);
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ответы на вопрос 1
@dimoff66
Кратко о себе: Я есть
В данном случае нет никакого смысла, проще функции редиректа объявить в отдельном файле и вызывать с передачей props. Все же постепенно разработка переходит на хуки, то есть на чистые функции без классов.

componentDidMount() {
  redirectIfNotLoggedIn(props);
  redirectIfNoAdministratorPrivileges(props);
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы