Using Django's Built-in Permissions inside React Template

[joefessenden]

Apologies if this is in the docs somewhere - I've not been able to track it down.

I'm trying to show or hide some elements in reactive based on specific permissions or roles that the Django user holds. For example, I would do it this way in the Django template language:
{% if request.user.is_superuser %} ... {% endif %}
{% if perms.polls.delete_poll %} ... {% endif %}
{% if request.user|has_group:"Some Group Or Other" or request.user.is_staff %} ... {% endif %}
What would be the equivalent approach using reactivated?

I can block views entirely (and just throw an error when someone tries to access them), but I can't block just specific elements on the screen. For example, I use this in my menus to just hide menu items that specific users cannot use.

[silviogutierrez]

These are all context processors. Of course, because it's all in the same Python process, Django doesn't need to know in advance what you want in your templates.

Fortunately, Reactivated has full support for custom context processors, just make sure they are typed. So in context_processors.py add something like:

User = Pick[models.User, "is_superuser", "can_delete_polls"]


def user(request: HttpRequest) -> Optional[User]:
    return request.user if request.user.is_authenticated else None

Note you'll need to implement a property for can_delete_polls in your User model, so that pick can get to it (Pick supports properties)

Then turn on that context processor.

You can of course, just type a full dictionary of what exactly you want if you don't want to use Pick.

[silviogutierrez]

you may need to type is_superuser with is_superuser: bool in your model, I think.

In my large project, I don't use Pick directly, I just have a custom context processor with a TypedDict that calculates all the properties I want for all my templates to access. is_manager, is_subscribed, etc.

[joefessenden]

I believe I am following. Need to clarify a little so it works in my head (I'm really at the edge of my ability - and I got Python/Django, but very new with react).

1. Are you saying that I would have to create a property in the user for each permission? I could not just call the permissions the user already has? I GUESS I could make the Python part of the function create itself a dictionary of the requester's permissions to pass into the react context processor?
2. Do you have any examples of how I would get this into the view that pushes into the template and then in the template (feel free to just point me to the right spot in the demo project(s) if they are in there.

Just in case it changes things, I have my menu as a separate tsx file that is imported into index.tsx and included inside HelmetProvider.

Thanks!

[mmonj]

You could follow this guide on creating custom context processors and how to register them in the django settings: https://dev.to/gilbishkosma/custom-context-processors-in-django-3c93

A simple custom processor example is the following: https://github.com/mmonj/Inventory-Manager/blob/reactivated-dev/server/context_processors.py

as for how to use it inside of the react template: https://github.com/mmonj/Inventory-Manager/blob/reactivated-dev/client/components/stockTracker/NavigationBar.tsx

[silviogutierrez]

Beautiful explanation!