<PermissionsSwitch>
<Can permissions="user:read">
<button>
Load history
</button>
</Can>
<Can permissions={["user:write", "user:admin"]}>
<button>
Modify history
</button>
</Can>
</PermissionsSwitch>
Have you ever needed users to see different things based on their role or permissions? Have you ever marveled at the magic that is react-router?
Look no further, as we create permission based routing inspired by React Router!
Also we are doing this in TypeScript. For those of you who are new to TypeScript, this will be a gentle, and shallow introduction. You will be able to follow along and simply ignore the small amounts of TypeScript if you wish.
- [ ] Create a context provider to hold current user permissions (ex. Router)
- [ ] Create a hook to use our context (ex. useLocation)
- [ ] Create a component (
Can) that conditionally renders its children based on permissions given as props (ex. Route) - [ ] Create a component that renders the first matching
Can(ex. Switch) - [ ] Learn enough TypeScript to be dangerous
- [ ] Write a
PrivateRoutecomponent that combines permissions with routing - [ ] Integrate with an actual authentication system, like Auth0, Firebase, or Okta.
- [ ] Write a
Switchcapable of checking both the route and permissions match. - [ ] Extend
Canto work with roles, authenticated states, or whatever else your application needs