Protected Routes met Middleware

Wat gaan we doen?

In vorige deel heb je register en login gemaakt. Je krijgt tokens terug, maar workouts zijn nog steeds voor iedereen toegankelijk.

In dit deel gaan we:

• Middleware maken die tokens checkt
• Workout routes beveiligen
• Zorgen dat elke user alleen eigen workouts ziet
• Frontend code schrijven om tokens te gebruiken

Stap 1: Wat is Middleware?

Request doorloopt deze stappen:

GET /api/workouts → requireAuth middleware → getAllWorkouts controller

Als middleware faalt, kom je nooit bij controller aan.

Stap 2: Middleware Maken

import jwt from 'jsonwebtoken';
import User from '../models/User.js';

export const requireAuth = async (req, res, next) => {
    // Check of er Authorization header is
    const { authorization } = req.headers;

    if (!authorization) {
        return res.status(401).json({ error: 'Je moet ingelogd zijn' });
    }

    // Haal token uit header (format: "Bearer ")
    const token = authorization.split(' ')[1];

    try {
        // Verifieer token
        const { userId } = jwt.verify(token, process.env.JWT_SECRET);

        // Haal user op en zet in request
        req.user = await User.findById(userId).select('_id email');

        // Ga door naar controller
        next();

    } catch (error) {
        res.status(401).json({ error: 'Token is niet geldig' });
    }
};

Stap 3: Middleware Toepassen

Open src/routes/workoutRoutes.js en voeg middleware toe:

import express from 'express';
import { 
    getAllWorkouts, 
    getWorkoutById, 
    createWorkout, 
    updateWorkout, 
    deleteWorkout 
} from '../controllers/workoutController.js';
import { requireAuth } from '../middleware/requireAuth.js';

const router = express.Router();

// Alle routes hieronder checken eerst token
router.use(requireAuth);

router.get('/', getAllWorkouts);
router.get('/:id', getWorkoutById);
router.post('/', createWorkout);
router.patch('/:id', updateWorkout);
router.delete('/:id', deleteWorkout);

export default router;

Stap 4: Testen met Postman

Test 1: Zonder Token (moet falen)

Probeer workouts ophalen zonder token:

• Method: GET
• URL: http://localhost:4000/api/workouts
• Headers: Geen Authorization

{
    "error": "Je moet ingelogd zijn"
}

Test 2: Met Token (moet werken)

Nu met geldige token. Volg deze stappen:

Stap 5: Workouts Per Gebruiker

Nu kunnen alleen ingelogde gebruikers workouts zien, maar ze zien ALLE workouts. We willen dat elke gebruiker alleen eigen workouts ziet.

Workout Model Aanpassen

Open src/models/Workout.js en voeg userId veld toe:

import mongoose from 'mongoose';

const workoutSchema = new mongoose.Schema({
    title: {
        type: String,
        required: true
    },
    reps: {
        type: Number,
        required: true
    },
    load: {
        type: Number,
        required: true
    },
    userId: {
        type: mongoose.Schema.Types.ObjectId,
        required: true,
        ref: 'User'
    }
}, {
    timestamps: true
});

const Workout = mongoose.model('Workout', workoutSchema);

export default Workout;

Stap 6: Controllers Aanpassen

Open src/controllers/workoutController.js en pas ALLE functies aan:

GET Alle Workouts

export const getAllWorkouts = async (req, res) => {
    try {
        const workouts = await Workout.find({ userId: req.user._id })
            .sort({ createdAt: -1 });
        res.status(200).json(workouts);
    } catch (error) {
        res.status(500).json({ error: 'Server error' });
    }
};

POST Nieuwe Workout

export const createWorkout = async (req, res) => {
    const { title, reps, load } = req.body;

    try {
        const workout = await Workout.create({ 
            title, 
            reps, 
            load,
            userId: req.user._id
        });
        res.status(201).json(workout);
    } catch (error) {
        res.status(400).json({ error: error.message });
    }
};

UPDATE Workout

export const updateWorkout = async (req, res) => {
    const { id } = req.params;

    if (!mongoose.isValidObjectId(id)) {
        return res.status(400).json({ error: 'Geen geldige workout ID' });
    }

    try {
        const workout = await Workout.findOneAndUpdate(
            { _id: id, userId: req.user._id },
            { ...req.body },
            { new: true }
        );

        if (!workout) {
            return res.status(404).json({ error: 'Workout niet gevonden' });
        }

        res.status(200).json(workout);
    } catch (error) {
        res.status(500).json({ error: 'Server error' });
    }
};

DELETE Workout

export const deleteWorkout = async (req, res) => {
    const { id } = req.params;

    if (!mongoose.isValidObjectId(id)) {
        return res.status(400).json({ error: 'Geen geldige workout ID' });
    }

    try {
        const workout = await Workout.findOneAndDelete({ 
            _id: id, 
            userId: req.user._id
        });

        if (!workout) {
            return res.status(404).json({ error: 'Workout niet gevonden' });
        }

        res.status(200).json(workout);
    } catch (error) {
        res.status(500).json({ error: 'Server error' });
    }
};

Stap 7: Testen User-Specific

Test met 2 Accounts

Stap 8: Frontend Implementatie

Nu moet frontend tokens kunnen versturen en opslaan.

Login Component

import { useState } from 'react';

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const handleLogin = async (e) => {
        e.preventDefault();

        try {
            const response = await fetch('http://localhost:4000/api/auth/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password })
            });

            const data = await response.json();

            if (response.ok) {
                // Sla token op
                localStorage.setItem('token', data.token);
                console.log('Ingelogd!');
                // Redirect of refresh workouts
            } else {
                setError(data.error);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    };

    return (
        <form onSubmit={handleLogin}>
            <input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />
            <input
                type="password"
                placeholder="Wachtwoord"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button>Inloggen</button>
            {error && <p>{error}</p>}
        </form>
    );
}
Export default Login

Workouts Ophalen met Token

const fetchWorkouts = async () => {
    const token = localStorage.getItem('token');

    if (!token) {
        console.log('Niet ingelogd');
        return;
    }

    try {
        const response = await fetch('http://localhost:4000/api/workouts', {
            headers: {
                'Authorization': `Bearer ${token}`
            }
        });

        const data = await response.json();

        if (response.ok) {
            setWorkouts(data);
        } else {
            console.error(data.error);
        }
    } catch (error) {
        console.error('Error:', error);
    }
};

Logout Functie

const handleLogout = () => {
    localStorage.removeItem('token');
    console.log('Uitgelogd');
    // Redirect naar login pagina of clear workouts
};

Veelvoorkomende Fouten

❌ "Je moet ingelogd zijn" bij elke request

❌ "Token is niet geldig"

❌ Zie workouts van andere users

❌ "req.user is undefined"

❌ Frontend: Kan niet inloggen

❌ Token blijft niet opgeslagen

Samenvatting

Je hebt nu volledig beveiligd systeem!

Je hebt nu een complete MERN Stack applicatie gebouwd!

Met authentication, authorization, CRUD operaties en een beveiligde API.