How to protect admin dashboard using Html,Css and Js

Prince_Np — Fri, 25 Mar 2022 17:24:57 +0000

In this brief tutorial, I will present how you can protect the Admin Panel and User Panel to your Html,Css and Javascript website or application consuming NodeJs Backend. You can use this knowledge to build an entire application with access roles for managing different sort of users.

first you must have the token for authentication and additional you need to have the user data in the Local storage as show in the demo

then the role in the user payload is the one we are going to be basing on while redirecting and protecting the admin and user dashboard by implying these 2 function that will be applied or called to each page of the admin or user accordingly .

Function to check if you are authenticated

this function need to be applied to the login and register page so that the authenticated user can not be able to access them.


function checkAuthentication() {
    let user = localStorage.getItem("user");
    if (user) {
        user = JSON.parse(user);
        const role = user.role;
        const admin = "admin";
        if (role === admin) {
            window.location.href = "../admin/dashboard.html";
        } else if (role != admin) {
            window.location.href = "../user/dashboard.html";
        } else {
        }
    } else {
        // do nothing
    }
}
checkAuthentication();

this function will protect your login page and register page .

Function to protect Admin dashboard

this function need to be applied to all pages that you need to be accessed only by the admin but the practice is used was to group together all admin files in the admin directory and user files in the user directory so that the Un-authenticated user can not be able to access them.

function checkAdmin() {
    let user = localStorage.getItem("user");
    if (user) {
        user = JSON.parse(user);
        const role = user.role;
        const admin = "admin";
        if (role === admin) {
            console.log("Admin");
        } else if (role != admin) {
            window.location.href = "../user/dashboard.html";
        } else {
            window.location.href = "../login.html";
        }
    } else {
        console.log("User");
    }
}
checkAdmin();

as you can see I'm basing on the user role that have been stored in the local storage so that I can redirect the user if he/she tries to tamper with the admin files.

Function to protect User dashboard

this function need to be applied to all pages that you need to be accessed only by the user so that the Un-authenticated user can not be able to access them.

function checkAuthUser() {
    let user = localStorage.getItem("user");
    if (user) {
        user = JSON.parse(user);
        const role = user.role;
        const standardUser = "standard-user";
        if (role === standardUser) {
            // do nothing 
        } else if (role != standardUser) {
            window.location.href = "../admin/dashboard.html";
        } else {
            window.location.href = "../login.html";
        }
    } else {
     // do nothing
    }
}

for this all your routes will be protected and safe form outside users .

if you are interested this the link to the Github repository , don't forget to like and follow to support for future posts,
Thanks .

DEV Community: Prince_Np

How to protect admin dashboard using Html,Css and Js

Function to check if you are authenticated

Function to protect Admin dashboard

Function to protect User dashboard