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

Question

[Борис Животное]

Хочу сделать базовый класс, который умеет редиректить со страниц, если нет прав администратора или не залогинены. Написал такие классы и получилось наследование, которого, вроде как, рекомендуют избегать. Это норм подход в 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);

Answer 1

[Дмитрий]

В данном случае нет никакого смысла, проще функции редиректа объявить в отдельном файле и вызывать с передачей props. Все же постепенно разработка переходит на хуки, то есть на чистые функции без классов.

componentDidMount() {
  redirectIfNotLoggedIn(props);
  redirectIfNoAdministratorPrivileges(props);
}

Comments

[Борис Животное]

В componentDidMount return не приведёт к переходу на другую страницу. Вообще, даже мой вариант не рабочий.