Как ограничить фронтенд-страницы в React на основе прав пользователей в рестфреймворке Django?

Я разрабатываю веб-приложение с использованием рестфреймворка Django (backend) и React (frontend). В бэкенде у меня есть несколько конечных точек, ограниченных определенными правами, и эта часть работает хорошо. Теперь мне нужно сделать так, чтобы во фронтенде каждый пользователь видел только те страницы, на которых у него есть хотя бы одно разрешение на внесение изменений.

Идеи, которые я рассматривал для реализации:

Добавление JSON-поля в таблицу пользователей, содержащего список доступных страниц для каждого пользователя. Таким образом, я смогу легко запрашивать доступные страницы напрямую.

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

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

Заранее благодарю за любые рекомендации.

Обе ваши идеи работают, но первая быстро станет громоздкой в управлении.

Я сделал то же самое, что и ваша вторая идея, для проекта fullstack, но это должно быть тривиально, чтобы настроить его, чтобы он также работал для DRF. Преимущество этого подхода в том, что, несмотря на большее количество настроек на начальном этапе, он гораздо лучше масштабируется. Всякий раз, когда вы изменяете страницы или добавляете новые страницы, вам не придется итерировать, возможно, всю вашу базу данных, чтобы обновить JSON-поля каждого пользователя для отражения изменений.

Вот основные способы решения этой проблемы:

# views.py
class ItemDeleteView(views.ModelDeleteView):
    permission_required = "app.remove_item"
    navbar_name         = "Delete item"

# templatetags/navbar.py
def generate_page_list(user: User):
    result_list = []

    for view in view_library:
        if user.has_perm(view.permission_required):
            result_list.append({
                "name": view.navbar_name,
                "url": reverse(view.url_name()),
                "icon": get_icon(view.icon),
            })

    return result_list


@register.inclusion_tag("includes/navbar.html")
def nav(user: User):
    cache_key = get_key(NAVBAR, user)
    pages = cache.get(cache_key)

    if pages is None:
        pages = generate_page_list(user)
        cache.set(cache_key, pages)

    return {'pages': pages}

В DRF вам, конечно, не понадобятся templatetags, но я включил их просто для того, чтобы полностью проиллюстрировать идею.

Затем в React разместите компонент входа pages где-нибудь в полезном месте - либо в контексте, либо в вашем любимом менеджере состояний, и теперь компонент navbar может загрузить всю информацию, необходимую ему для рисования доступных страниц.

Вернуться на верх