Webentwicklung – die besten Beiträge

Role-Based Access Control (RBAC) in Next.js?

Ich arbeite an der Implementierung einer Role-Based Access Control (RBAC) für meine API basierend auf Next.Js und möchte sicherstellen, dass ich die Best Practices für effiziente Datenbankabfragen einhalte. Meine Anwendung verwendet Next.js zusammen mit einer Backend-Datenbank ORM (drizzle-orm), um Benutzerrollen und Berechtigungen zu verwalten.

CREATE TABLE Users (
    user_id SERIAL PRIMARY KEY,
    username VARCHAR(255) UNIQUE NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE Roles (
    role_id SERIAL PRIMARY KEY,
    role_name VARCHAR(50) UNIQUE NOT NULL
);

CREATE TABLE UserRoles (
    user_id INT REFERENCES Users(user_id),
    role_id INT REFERENCES Roles(role_id),
    PRIMARY KEY (user_id, role_id)
);

CREATE TABLE Permissions (
    permission_id SERIAL PRIMARY KEY,
    permission_name VARCHAR(50) UNIQUE NOT NULL
);

CREATE TABLE RolePermissions (
    role_id INT REFERENCES Roles(role_id),
    permission_id INT REFERENCES Permissions(permission_id),
    PRIMARY KEY (role_id, permission_id)
);

CREATE TABLE Sessions (
    session_id UUID PRIMARY KEY,
    user_id INT REFERENCES Users(user_id),
    valid_until TIMESTAMP,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Derzeit werden bei jeder Anfrage die einem Benutzer zugewiesenen Rollen und Berechtigungen aus der Datenbank abgerufen, um die Zugriffsebene zu bestimmen. Ich bin jedoch besorgt über die potenziellen Auswirkungen dieses Ansatzes auf die Leistung, insbesondere wenn die Anwendung skaliert.

Was sind die besten Praktiken für die Implementierung von RBAC in Next.js bei gleichzeitiger Minimierung der Anzahl von Datenbankabfragen? Insbesondere interessiere ich mich für Strategien zur Zwischenspeicherung von Rollen- und Berechtigungsdaten, zur Optimierung der Token-basierten Autorisierung und zum Umgang mit dem Ablauf und der Ungültigkeit von Caches

programmieren, Datenbank, Webentwicklung, Authentifizierung

HTML: Wie kann ich die Titelbox verschieben?

Hey,

ich verzweifle mittlerweile an meinen eigenen Sinnen und hab schon manches probiert. Das Einbinden von KI (ChatGPT) hat mir dann den Rest gegeben, da alles was davon kam einfach keinen Sinn ergab.

Ich habe zwei Container, also left-colum und right-colum.

Wie man in dem Code sehen kann, wird die Klasse "whatis-titlebox" im ersten Teil korrekt angezeigt. Es wird das Szenario eintreten, dass die linke Spalte leer beiben wird und nur die rechte mit Text gefüllt wird.

Dazu dachte ich mir, kopiere ich den Standardteil und spreche die Kopie dann mit "rightinput" um eben "whatis-titlebox" aus dem 2. Teil, also "rightinput whatis-titlebox" über die rechte colum zu legen, sodass der Text darin linksbündig mit dem Text sichtbar wird. Fehlanzeige, ich habe es nicht geschafft. Vielleicht ist mein Code auch einfach nur falsch geschrieben.

Ich blicke da nicht mehr durch und hoffe, dass ich hier Hilfe erhalte.

HTML:

<div class="leidfadenmain-input">
    <div class="whatis">
        <div class="whatis-titlebox">
            <h2 class="whatis-title-txt">Über</h2>
        </div>
        <div class="container">
            <div class="left-column">
                <!-- Linker Text -->
                <p class="whatis-txt"></p>
                <p class="whatis-txt"></p>
            </div>
            <div class="divider"></div>
            <div class="right-column">
                <!-- Rechter Text bei Bedarf -->
                <p class="whatis-txt"></p>
            </div>
        </div>
    </div>

    <div class="whatis">
        <div class="rightinput whatis-titlebox">
            <h2 class="whatis-title-txt">Über</h2>
        </div>
        <div class="container">
            <div class="left-column">
                <!-- Linker Text -->
            </div>
            <div class="divider"></div>
            <div class="right-column">
                <!-- Rechter Text bei Bedarf -->
                <p class="whatis-txt"></p>
            </div>
        </div>
    </div>
</div>

CSS:

.leidfadenmain-input {
    padding-top: 100px;
    display: flex;
    flex-direction: column;
}

.whatis {
    display: flex;
    flex-direction: column; /* Ändert die Ausrichtung auf vertikal */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.whatis-txt {
    padding-bottom: 15px;
}

.whatis .whatis-titlebox {
    position: relative;
    margin-bottom: 20px;
    top: 0;
}

.rightinput .whatis-titlebox {
    margin-bottom: 20px;
    top: 0;
    left: 50%; /* Zentriert die Überschrift horizontal */
    transform: translateX(-50%); /* Zentriert die Überschrift horizontal */
}

.whatis .whatis-title-txt {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.whatis .left-column,
.whatis .right-column {
    width: 45%;
}

.whatis .divider {
    width: 1px;
    height: auto;
    background-color: black; /* Ändere die Farbe bei Bedarf */
    margin: 0 10px;
}

.whatis .container {
    display: flex;
    align-items: stretch;
    width: 100%;
}

Einfach erklärt.: ".rightinput .whatis-titlebox" soll, sofern gebraucht, über right-colum platziert werden.

Sofern ihr mir weiterhelfen könntet, wäre ich euch dankbar!

Vielen Dank!

Liebe Grüße

HTML, Webseite, CSS, Code, Webdesign, Webentwicklung

NextJS-Backend/Datenbank?

Ich habe eine Anwendung, wo sich ein Nutzer mit Auth0 registrieren kann.

Es zeigt den Namen und die E-Mail ganz normal an und mit

/api/auth/login
/api/auth/logout

kann man sich anmelden/abmelden.

Nun sollen alle Nutzer XP-Punkte haben (bei 0 starten) und durch Fragen beantworten im Level aufsteigen können. Bzw. ich möchte ganz simpel erst einmal mit einem Buttonklick 25 XP-Punkte dazu verdienen.

Das Ganze kriege ich normalerweise mit PHP und einer normalen SQL-Datenbank, die ich in phpMyAdmin einrichte, hin, aber da ich in NextJS neu bin, wollte ich wissen, wie das da abläuft.

Vercel liefert soweit ich weiß keine Datenbank, wo ich Nutzerdaten hinschicken kann und Auth0 kann auch nicht mehr, als nur ein sicheres Loginsystem bieten.
Also müsste ich die SQL-Datenbank wie immer anlegen und mit dem user-Objekt von Auth0 arbeiten und die "sid" benutzen, um die Punkte dem richtigen User zuzuschreiben?

Ich weiß, dass MongoDB beliebt ist, aber das ist doch auch wieder extern irgendwo und kostet Geld und ist nicht auf einem "Standard" Webhosting inklusive, wie PHP/SQL-Datenbank.

Wie benutzt man MongoDB und ist das sinnvoll?

Für Next brauche ich kein VPS, was praktisch ist. Keine zusätzlichen Kosten und lange Einrichtung. Dafür SSR.

NextJS ist auch selber das Backend soweit ich weiß, also ich kann direkt in der Serverkomponente eine Datenbankabfrage machen und mit Node etwas zu der Datenbank hinzufügen, wie das mit dem Klick +25 XP.

Von Firebase habe ich gehört, dass es beides kann: Sowohl sichere Authentication als auch Datenbank für Nutzerdaten.

Aber ob das bei wenigen Nutzern Geld kostet weiß ich nicht.

Server, App, Linux, SQL, HTML, Webseite, JavaScript, Datenbank, Informatik, MySQL, Programmiersprache, Webentwicklung, MongoDB

Berufseinstieg in meiner aktuellen Lage sehr schwer was tun?

Hallo zusammen, ich hoffe euch geht es soweit gut :-)

Ich hätte eine Frage, die mir auf der Seele brennt, an die erfahrenen ITler. Eventuell kann mir ein/eine ITler/in einen Leitfaden oder Tipps geben, um attraktiver für den Arbeitsmarkt zu werden?

Kurz zu meinem Werdegang:

Ich habe kurz bevor die Corona-Pandemie losging meinen Job als Technischer Produktdesigner verloren (Vertragsbruch durch den Arbeitgeber) und durch die Pandemie keinen neuen Job gefunden, da die Unternehmen zu dem Zeitpunkt selbst Probleme hatten, ihr eigenes Personal zu halten. Nun stellte sich die Frage "wartest du die Pandemie ab oder machst du eine Umschulung?" Da zu dem Zeitpunkt (vor etwa 3 Jahren) kein Ende der Pandemie in Sicht war, entschloss ich mich, eine Umschulung zum "Fachinformatiker für Anwendungsentwicklung" zu machen.

Gesagt, getan. Leider war das Umschulungsunternehmen eines dieser schwarzen Schafe, die einfach schnelles Geld machen wollten, jedoch in keinster Weise ausgebildet haben. Dort bin ich durch die schriftliche Abschlussprüfung mangels theoretischen Wissens durchgefallen, sodass ich nach dem zweiten Jahr (Umschulung ging zwei Jahre) mich bei einem Unternehmen gemeldet habe, das mich als Azubi im dritten Lehrjahr eingestellt hat, und dort habe ich dann meine Ausbildung erfolgreich abgeschlossen. Jetzt war das Unternehmen leider eines, welches keine eigenen Entwickler hatte. Der Ausbilder sagte selbst, das letzte Mal als er programmiert hat, sind mindestens 10 Jahre her, bei seiner Umschulung damals, wodurch mein Mentor das Internet war.

Naja, Zähne zusammengebissen, habe ich mich in C# und WinForms eingearbeitet und einige Desktop-Apps geschrieben, um die Arbeit zu automatisieren von den Kollegen. (Einfache Programme wie Tabellen umsortieren, Artikel-Nummern mappen, neue Artikel-Nummern in die Datenbank übergeben). Nebenbei natürlich noch den ganzen IHK-Stoff angeeignet, wodurch ich über den Tag gearbeitet habe und nach Feierabend dann IHK-Prüfungen durchgearbeitet habe.

Mir ist bewusst, dass ich aktuell erfahrungstechnisch nicht auf dem Level eines Juniors bin, der einen Mentor/Ausbilder während der Ausbildungszeit hatte, jedoch bemühe ich mich, Neues zu lernen.

Seit meinem Abschluss im Januar 2024 suche ich nach einer Trainee-/Junior-Stelle. Leider erhalte ich nur Absagen mangels Erfahrung. Da ich während der Zeit nicht einfach nur vor mich hinvegetieren will, arbeite ich mich eigenständig mit Udemy-Kursen in die Tech-Stacks eines Frontend-Entwicklers ein. Bis jetzt HTML- und CSS-Kurs beendet und aktuell am JavaScript-Kurs dran. Mit meiner aktuellen Erfahrung habe ich mir dann eine Webseite "Portfolio" aufgebaut (HTML & CSS).

Mir ist bewusst, dass die Unternehmen wirtschaftlich handeln müssen und da nimmt man eben den Besten auf, jedoch muss es doch auch Chancen geben für Leute wie mich, die eben keinen Mentor hatten, der einem was gezeigt hat und trotzdem gewillt sind, alles zu geben.

Tipps, HTML, JavaScript, Berufseinstieg, C Sharp, Mentoring, Webentwicklung, Junior, Fachinformatiker Anwendungsentwicklung, Appentwicklung, Trainee-Programm, WinForms

php-Zugriff auf mysql funktioniert nicht?

Ich habe folgende Funktion in PHP geschrieben:

function getName($id) {
                global $conn;
                $sql = "SELECT Vorname, Nachname FROM mitglieder WHERE ID = `$id`";
                $result = $conn->query($sql);
                if ($result->num_rows > 0) {
                    $row = $result->fetch_assoc();
                    return $row['Vorname'] . " " . $row['Nachname'];
                } else {
                    return "";
                }
            }

Aber aus irgendeinem Grund kommt immer folgende Fehlermeldung:

Warning: Attempt to read property "num_rows" on bool in C:\xampp\htdocs\***********.php on line 35

Diese Variable $conn funktioniert aber an anderer Stelle im globalen Code außerhalb dieser Funktion einwandfrei wie gewünscht und ich sehe vom Code her keinen nennenswerten Unterschied.

Was ich bereits versucht habe:

  • $conn als Parameter an die Funktion zu übergeben
  • $conn in der Funktion selber zu definieren
  • $conn in der Funktion selber definieren und dass $conn im globalen Code entfernen
  • ChatGPT nach dem Fehler fragen
  • Folgende Fehlerabfrage einzubauen (dabei war $conn auch in der Funktion selber und NUR in der Funktion selber definiert):
if ($conn->connect_error) {
                die("Serverfehler: " . $conn->connect_error);
            }

Das führte aber nur zu folgender Fehlermeldung:

Warning: Attempt to read property "connect_error" on null in C:\xampp\htdocs\*********.php on line 26

Hat alles nichts geholfen. Wisst ihr wo der Fehler liegt?

Computer, Technik, SQL, HTML, Webseite, programmieren, JavaScript, Code, Datenbank, MySQL, PHP, Programmiersprache, Webentwicklung, phpMyAdmin, Programmierfehler

Meistgelesene Beiträge zum Thema Webentwicklung