[Clean pattern for handling roles and permissions in large-scale React apps] #auth #API

index.md

https://itnext.io/clean-pattern-for-handling-roles-and-permissions-in-large-scale-react-apps-99531869ad71

• ROLES - All the user roles in our application.
• SCOPES - Scopes we pass to our gating wrapper.
• PERMISSIONS - The map defines the set of scopes each user role possesses.

export const ROLES = {
  viewer: "VIEWER",
  editor: "EDITOR",
  owner: "OWNER"
};

export const SCOPES = {
  canCreate: "can-create",
  canEdit: "can-edit",
  canDelete: "can-delete",
  canView: "can-view"
};

export const PERMISSIONS = {
  [ROLES.viewer]: [SCOPES.canView],
  [ROLES.editor]: [SCOPES.canView, SCOPES.canEdit],
  [ROLES.owner]: [
    SCOPES.canView,
    SCOPES.canEdit,
    SCOPES.canCreate,
    SCOPES.canDelete
  ]
};