Natuurlijk! Hier is een stapsgewijs proces om gebruikersrollen en machtigingen op te zetten in je React Native-toepassing, gericht op de gebruikersrollen en functionaliteiten die je hebt genoemd: 1. **Backend-structuur opzetten voor rollen en machtigingen** - **Definieer rollen en rechten:** Maak een datamodel waarin je de verschillende gebruikersrollen (bijvoorbeeld Beheerder) en hun bijbehorende toegangsrechten vastlegt. Bijvoorbeeld: ```json { "roles": { "beheerder": { "kanRapportenBekijken": true, "kanGebruikersBeheren": true }, "gebruiker": { "kanRapportenBekijken": false, "kanGebruikersBeheren": false } } } ``` - **Gebruik een database:** Sla deze rollen en rechten op in je database (bijvoorbeeld Firebase Firestore, PostgreSQL, etc.), gekoppeld aan gebruikersaccounts. 2. **Authenticatie en gebruikersidentificatie** - Gebruik een authenticatiesysteem zoals Firebase Authentication, Auth0, of een eigen auth-oplossing. - Bij het inloggen wordt de gebruikersrol opgehaald uit de database en opgeslagen in de sessie of token. 3. **Implementatie van role-based access control (RBAC) op de client** - **Token of sessie:** Verstuur de rol-informatie met de authenticatie-token of haal deze op bij het inloggen. - **State management:** Gebruik bijvoorbeeld Redux of Context API om de rol en machtigingen in de app op te slaan. - **Toegangscontrole:** Maak hogere-order componenten of hooks die controleren of een gebruiker de juiste rechten heeft voordat bepaalde schermen of functionaliteiten worden weergegeven. 4. **Voorbeeld van een beschermde component (React Native)** ```jsx import React, { useContext } from 'react'; import { UserContext } from './UserContext'; const RapportenScherm = () => { const { userRoles } = useContext(UserContext); if (!userRoles.kanRapportenBekijken) { return <Text>Toegang geweigerd</Text>; } return ( <View> <Text>Rapporten bekijken</Text> {/* Rapporten componenten */} </View> ); }; export default RapportenScherm; ``` 5. **Beveiligingsmaatregelen** - **Server-side controle:** Zorg dat de backend ook controleert of een gebruiker de juiste rechten heeft voordat gevoelige gegevens worden opgevraagd of bewerkt. - **Token-verificatie:** Gebruik JWT of andere tokens die de rol bevatten en controleer deze bij elke API-aanroep. - **Minimale rechten:** Geef gebruikers alleen de rechten die ze nodig hebben, en verberg niet alleen UI-elementen, maar voorkom ook API-toegang indien de rechten ontbreken. 6. **Test en onderhoud** - Test verschillende gebruikersrollen grondig. - Houd rollen en rechten up-to-date naarmate je app groeit. - Documenteer je RBAC-structuur voor toekomstige ontwikkeling en beveiliging. --- **Samenvatting:** - Definieer rollen en rechten op backend. - Koppel gebruikers aan rollen en haal deze op bij authenticatie. - Gebruik client-side checks en conditionele rendering om functionaliteiten te beperken. - Controleer rechten ook op server-side voor beveiliging. - Implementeer een duidelijk en onderhoudbaar machtigingsysteem. Wil je een voorbeeldcode of verdere uitleg over bijvoorbeeld het integreren met een specifieke backend of authenticatiesysteem?

Zeker, ik zal je stap voor stap begeleiden bij het opzetten van gebruikersrollen en machtigingen in je React Native-applicatie. Hier is een uitgebreide handleiding: ## 1. Basisstructuur voor Gebruikersrollen ### Roldefinities aanmaken ```javascript // constants/roles.js export const USER_ROLES = { ADMIN: 'admin', USER: 'user', VIEWER: 'viewer' }; export const PERMISSIONS = { VIEW_REPORTS: 'view_reports', // Voeg hier andere machtigingen toe }; ``` ## 2. Gebruikerscontext en Authenticatie ### Auth Context opzetten ```javascript // context/AuthContext.js import React, { createContext, useState, useContext } from 'react'; const AuthContext = createContext(); export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const [userRole, setUserRole] = useState(null); const login = (userData) => { setUser(userData); setUserRole(userData.role); }; const logout = () => { setUser(null); setUserRole(null); }; const hasPermission = (permission) => { // Controleer of gebruiker de vereiste machtiging heeft const rolePermissions = getPermissionsForRole(userRole); return rolePermissions.includes(permission); }; return ( <AuthContext.Provider value={{ user, userRole, login, logout, hasPermission }}> {children} </AuthContext.Provider> ); }; export const useAuth = () => useContext(AuthContext); ``` ## 3. Machtigingenbeheer ### Rol-gebaseerde machtigingen ```javascript // utils/permissions.js import { USER_ROLES, PERMISSIONS } from '../constants/roles'; const ROLE_PERMISSIONS = { [USER_ROLES.ADMIN]: [ PERMISSIONS.VIEW_REPORTS, // Andere admin-machtigingen ], [USER_ROLES.USER]: [ // Gebruikersmachtigingen ], [USER_ROLES.VIEWER]: [ PERMISSIONS.VIEW_REPORTS, // Alleen-lezen machtigingen ] }; export const getPermissionsForRole = (role) => { return ROLE_PERMISSIONS[role] || []; }; export const canViewReports = (userRole) => { return getPermissionsForRole(userRole).includes(PERMISSIONS.VIEW_REPORTS); }; ``` ## 4. Beveiligde Componenten ### Protected Component voor Rapporten ```javascript // components/ProtectedReportView.js import React from 'react'; import { View, Text, Alert } from 'react-native'; import { useAuth } from '../context/AuthContext'; import { PERMISSIONS } from '../constants/roles'; const ProtectedReportView = () => { const { hasPermission, userRole } = useAuth(); if (!hasPermission(PERMISSIONS.VIEW_REPORTS)) { return ( <View style={{ padding: 20 }}> <Text>Toegang geweigerd. Je hebt geen rechten om rapporten te bekijken.</Text> </View> ); } return ( <View style={{ padding: 20 }}> <Text>Welkom bij de rapportenmodule</Text> {/* Rapport componenten hier */} </View> ); }; export default ProtectedReportView; ``` ## 5. Hoog-niveau Route Beveiliging ### Navigatie met beveiliging ```javascript // navigation/AppNavigator.js import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { useAuth } from '../context/AuthContext'; import { canViewReports } from '../utils/permissions'; const Stack = createStackNavigator(); const AppNavigator = () => { const { userRole } = useAuth(); return ( <NavigationContainer> <Stack.Navigator> {/* Openbare routes */} <Stack.Screen name="Login" component={LoginScreen} /> {/* Beveiligde routes */} {canViewReports(userRole) && ( <Stack.Screen name="Reports" component={ReportsScreen} /> )} {/* Andere beveiligde routes op basis van rollen */} </Stack.Navigator> </NavigationContainer> ); }; ``` ## 6. API Beveiliging en Data Laag ### Beveiligde API calls ```javascript // services/api.js import { useAuth } from '../context/AuthContext'; export const useSecureApi = () => { const { user, userRole } = useAuth(); const secureFetch = async (url, options = {}) => { const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${user?.token}`, 'X-User-Role': userRole, ...options.headers, }; const response = await fetch(url, { ...options, headers }); if (response.status === 403) { throw new Error('Toegang geweigerd'); } return response; }; const fetchReports = async () => { if (!canViewReports(userRole)) { throw new Error('Geen rechten om rapporten op te halen'); } return secureFetch('/api/reports'); }; return { secureFetch, fetchReports }; }; ``` ## 7. Gebruikersbeheer Scherm ### Admin gebruikersbeheer ```javascript // screens/UserManagementScreen.js import React, { useState, useEffect } from 'react'; import { View, Text, FlatList, TouchableOpacity } from 'react-native'; import { useAuth } from '../context/AuthContext'; import { USER_ROLES } from '../constants/roles'; const UserManagementScreen = () => { const { userRole, hasPermission } = useAuth(); const [users, setUsers] = useState([]); // Alleen admins kunnen dit scherm zien if (userRole !== USER_ROLES.ADMIN) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Alleen beheerders hebben toegang tot deze functie</Text> </View> ); } const updateUserRole = async (userId, newRole) => { try { // API call om gebruikersrol bij te werken await fetch(`/api/users/${userId}/role`, { method: 'PUT', body: JSON.stringify({ role: newRole }), }); // Update lokale state } catch (error) { console.error('Fout bij bijwerken rol:', error); } }; return ( <View style={{ flex: 1, padding: 20 }}> <Text style={{ fontSize: 24, marginBottom: 20 }}>Gebruikersbeheer</Text> <FlatList data={users} keyExtractor={(item) => item.id} renderItem={({ item }) => ( <View style={{ padding: 10, borderBottomWidth: 1 }}> <Text>{item.name}</Text> <Text>Huidige rol: {item.role}</Text> <TouchableOpacity onPress={() => updateUserRole(item.id, USER_ROLES.ADMIN)}> <Text>Maak Administrator</Text> </TouchableOpacity> </View> )} /> </View> ); }; ``` ## 8. Veiligheids Best Practices ### Belangrijke veiligheidsmaatregelen: 1. **Backend Validatie**: Implementeer altijd rol- en machtigingscontroles op de backend 2. **JWT Tokens**: Gebruik secure tokens met rol-informatie 3. **Input Validatie**: Valideer alle gebruikersinvoer 4. **Error Handling**: Geef geen gevoelige informatie in foutmeldingen 5. **Regular Audits**: Voer regelmatig beveiligingsaudits uit ### Backend voorbeeld (Node.js): ```javascript // Backend middleware voor rolcontrole const requireRole = (role) => { return (req, res, next) => { if (req.user.role !== role) { return res.status(403).json({ error: 'Onvoldoende rechten' }); } next(); }; }; // Gebruik in routes app.get('/api/reports', requireRole('admin'), (req, res) => { // Retourneer rapportgegevens }); ``` ## 9. Testen van Machtigingen ```javascript // __tests__/permissions.test.js import { canViewReports, getPermissionsForRole } from '../utils/permissions'; import { USER_ROLES } from '../constants/roles'; describe('Permissions', () => { test('Admin kan rapporten bekijken', () => { expect(canViewReports(USER_ROLES.ADMIN)).toBe(true); }); test('Gewone gebruiker kan geen rapporten bekijken', () => { expect(canViewReports(USER_ROLES.USER)).toBe(false); }); }); ``` Deze structuur biedt een schaalbare en veilige basis voor rolgebaseerde toegang in je React Native-applicatie. Zorg ervoor dat je alle kritieke autorisatiebeslissingen ook op de backend implementeert voor maximale beveiliging.