Html, Css 및 Js를 사용하여 관리자 대시보드를 보호하는 방법

이 간단한 자습서에서는 Html, Css 및 Javascript 웹 사이트 또는 NodeJs 백엔드를 사용하는 응용 프로그램에 대한 관리자 패널 및 사용자 패널을 보호하는 방법을 제시합니다. 이 지식을 사용하여 다양한 종류의 사용자를 관리하기 위한 액세스 역할이 있는 전체 애플리케이션을 구축할 수 있습니다.

먼저 인증을 위한 토큰이 있어야 하고 추가로 데모에 표시된 대로 로컬 저장소에 사용자 데이터가 있어야 합니다.



그런 다음 사용자 페이로드의 역할은 관리자 또는 사용자의 각 페이지에 적용되거나 호출될 이 2가지 기능을 암시하여 관리자 및 사용자 대시보드를 리디렉션하고 보호하는 동안 기반이 될 역할입니다.

본인 인증 여부를 확인하는 기능

이 기능은 인증된 사용자가 액세스할 수 없도록 로그인 및 등록 페이지에 적용해야 합니다.

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();

이 기능은 로그인 페이지와 등록 페이지를 보호합니다.

Admin 대시보드 보호 기능

이 기능은 관리자만 액세스해야 하는 모든 페이지에 적용해야 하지만 인증되지 않은 사용자가 액세스할 수 없습니다.

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();

보시다시피 저는 로컬 스토리지에 저장된 사용자 역할을 기반으로 하고 있으므로 사용자가 관리 파일을 변경하려고 시도하는 경우 사용자를 리디렉션할 수 있습니다.

사용자 대시보드 보호 기능

이 기능은 인증되지 않은 사용자가 액세스할 수 없도록 사용자만 액세스해야 하는 모든 페이지에 적용해야 합니다.

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
    }
}

이를 위해 모든 경로가 보호되고 외부 사용자로부터 안전합니다.

Github repository에 대한 링크에 관심이 있으시면 향후 게시물을 지원하기 위해 좋아요와 팔로우를 잊지 마세요.
감사 .