Five Implementation Solutions for React Button-Level Auth Control
In FE apps, button-level auth control is a common & critical req. It ensures users can only see/operate functions within their permissions. This article introduces 5 solutions for implementing button-level auth control in React, helping devs choose the most suitable approach based on their project's needs.
What is Button-Level Auth Control?
Button-level auth control refers to showing/hiding buttons or actions based on the user's role or permission list. It's a granular FE permission mgmt method, commonly used in admin panels, enterprise apps, etc.
Permission data typically comes from:
-
User permission list returned by the backend after login
-
Permission mapping table configured on the FE based on roles
-
Unified permission mgmt system combined with route permissions
Five Implementation Solutions
1. Higher-Order Component (HOC)
HOC is a classic React pattern that controls access by wrapping the original component and injecting permission logic.
|
function withAuth(permissions) { return WrappedComponent => props => { const userPermissions = getUserPermissions(); // Get user perms const hasPermission = permissions.some(p => userPermissions.includes(p)); return hasPermission ? <WrappedComponent {...props} /> : null; }; } const MyButton = withAuth(['edit', 'delete'])(Button); |
2. Render Props
Encapsulate the permission check logic in a component using the Render Props pattern for flexible control over child component rendering.
|
function AuthRender({ children, permissions }) { const userPermissions = getUserPermissions(); const hasPermission = permissions.some(p => userPermissions.includes(p)); return hasPermission ? children() : null; } <AuthRender permissions={['edit', 'delete']}> {() => <Button>Edit</Button>} </AuthRender> |
3. React Context
Use the Context API to manage the user's permission state globally; any component can easily access the permission info.
|
const AuthContext = React.createContext(); function AuthProvider({ children }) { const userPermissions = getUserPermissions(); return ( <AuthContext.Provider value={userPermissions}> {children} </AuthContext.Provider> ); } function RestrictedButton({ permissions }) { const userPermissions = useContext(AuthContext); const hasPermission = permissions.some(p => userPermissions.includes(p)); return hasPermission ? <Button /> : null; } |
4. Custom Hook
Utilize a custom Hook to abstract the permission check logic, making the code cleaner and more reusable.
|
function useAuth(permissions) { const userPermissions = getUserPermissions(); return permissions.some(p => userPermissions.includes(p)); } function MyButton() { const hasPermission = useAuth(['edit', 'delete']); return hasPermission ? <Button /> : null; } |
5. Using Redux or MobX
If the project already uses a global state mgmt tool (like Redux or MobX), store the permission info in the global state and inject it into components via a connector.
|
// Redux example function mapStateToProps(state) { return { permissions: state.permissions }; } function RestrictedButton({ permissions }) { const hasPermission = permissions.some(p => userPermissions.includes(p)); return hasPermission ? <Button /> : null; } export default connect(mapStateToProps)(RestrictedButton); |
Best Practice Recommendations
-
Centralize permission logic: Unify the permission check logic for easier maint. & modification.
-
Flexible component rendering: Decide whether to not render or show as disabled based on biz reqs.
-
FE-BE permission coordination: FE controls UI display, BE must verify permissions for sensitive ops to ensure data security.
-
Consider dynamic permission updates: User perms may change during a session; ensure the UI responds promptly.
Summary
The five solutions above each have their applicable scenarios. Devs can choose flexibly based on project arch. & complexity. Regardless of the method, remember: FE permission control is primarily for improving UX; real security checks must be done by the BE.
We hope this article helps you implement button-level auth control more elegantly in your React projects.
Note: The getUserPermissions() in the code examples is a placeholder function. In actual projects, obtain permission info based on the user's login status or context.
