Read roles in the front end

[reefdog]

We now have (and use) roles for authorization of certain API features. Consequently, the front end needs to gate certain functionality based on those roles. What's the best way to read them? What's a good convention for doing role-based checks? Do we have a bunch of feature checks like canSeeAllProposals() that route back to a centralize role check? Or do we just do role checks inline like isAdmin()?

I'll note that I can read our roles with the following code, but only if I disable a bunch of ESLint warnings (as shown). Hoping someone can help me sort this out:

import { useOidcAccessToken } from '@axa-fr/react-oidc';

// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const { accessTokenPayload: { realm_access: { roles } } } = useOidcAccessToken();
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
const isAdmin = roles.includes('pdc-admin');

@slifty I'd appreciate your eyes on the ESLint / TypeScript warnings specifically (i.e. the right way to read the roles), but also your architectural thoughts on how to apply the roles to front-end feature gatekeeping.