access control

[abz53378]

Why

It's normal that every role is authorized to CRUD different data source. When giving the different rules, Canner component should generate the different UIs and have different behaviors such as disabled actions, hidden field, and disallow the specific pages (e.g. /posts/postID1).

Solution

Canner will get an object rules which records the authorization of the current user. The helper function rbac will check with the rules and keyName and return the corresponding properties of each component.

interface rules {
  [keyName: string]: Array<'create' | 'update' | 'delete' | 'read'>
}
function rbac({
  keyName,
  rules
} : {
  keyName: string,
  rules
}): {
  disabled: {
    create: boolean,
    update: boolean,
    delete: boolean
  },
  hidden: boolean
}

• disabled property: Handled by component, each component should have it disabled UI, for example, a table component should hide the edit button and delete button.
• hidden property: Handled In higher order component, if there is a hidden property, the component WON'T be rendered.

Rules Example

{
  posts: ['create', 'update', 'delete', 'read']
}

cc @wwwy3y3, @FrankYang0529, please take a look, does the format of rules match your backend plan or you prefer different format?