时间戳

首页 > 解决方案 > 仅使用 Javascript 的基于角色的登录

javascript - 仅使用 Javascript 的基于角色的登录

问题描述

只是一个快速的问题。您认为可以使用 Localstorage i Javascript 创建基于角色的登录系统吗？不使用任何库或框架（不允许）？我的方法是创建一个具有 2 个不同授权级别的“用户”类，它将重定向到两个不同的 html 站点:)

class userLogin{
    constructor(username, password, authLevel){
        this.username = username;
        this.password = password;
        this.authlevel = authLevel;
    }
}
// Localstorage logins
if(localStorage.getItem(userLogin) == null){
    var userLogins = [];
    userLogins.push(new userLogin("Benjamin", 4321,"1" ));
    userLogins.push(new userLogin("Mads",12345,"1"));
    userLogins.push(new userLogin("Simon",1234,"1"));
    userLogins.push(new userLogin("Jessica", 54321,"1"));
    // Logins for Projectmanagers
    userLogins.push(new userLogin("Oliver",1234,"2"));
    userLogins.push(new userLogin("Sara",4321,"2"));

    var userLoginstring = JSON.stringify(userLogins)
    localStorage.setItem("userLogin", userLoginstring)
} else {
    var employeeList = JSON.parse(localStorage.getItem("userLogin"))
}

标签： javascripthtml

解决方案

您认为可以使用 Localstorage i Javascript 创建基于角色的登录系统吗？

可以创建它，但它不会是远程安全的。任何用户都将能够获得他们想要的任何访问权限，因为浏览器中保存的任何信息都不会对有动机的用户隐藏。

如果您想完全在 JavaScript 中执行此操作，那很好，只需确保一些 JavaScript 在服务器上运行，将身份验证和角色信息存储在服务器端（您可以将当前用户的角色信息回显到客户端） UI 目的），并将所有操作都保留在服务器端。

关于问题中代码的几点说明：

  • 旁注：JavaScript 中压倒性的约定是构造函数，如您userLogin以大写字母开头（如Date,Map等），所以UserLogin.

  • userLogins进入一个分支if但进入另一个分支很奇怪employeeList。建议只使用一个登录列表，而不是两个，这取决于它们是否已经存在。

  • getItem接受要获取的项目的字符串键，所以这一行：

    if(localStorage.getItem(userLogin) == null){

    将隐式转换userLogin为字符串并使用该键查找值。YouruserLogin是使用class语法创建的构造函数，默认情况下将转换为包含类代码的字符串，这可能不是您要使用的键。

    从您以后的代码中，我怀疑您想做这样的事情（其中还包含了上面的其他反馈）：

    let userLogins = JSON.parse(localStorage.getItem("userLogin"));
if (!userLogins) {
    userLogins = [
        new UserLogin("Benjamin", 4321,"1" ),
        new UserLogin("Mads",12345,"1"),
        new UserLogin("Simon",1234,"1"),
        new UserLogin("Jessica", 54321,"1"),
        // Logins for Projectmanagers
        new UserLogin("Oliver",1234,"2"),
        new UserLogin("Sara",4321,"2"),
    ];
    localStorage.setItem("userLogin", JSON.stringify(userLogins));
}
// ...use `userLogins`

但同样，这根本不安全。你说过你是作为学校项目的第一步做的，不过，所以...

推荐阅读