javascript - 无需后端的用户认证

Question

我有一个简单的 Backbone.js 应用程序，其中包含具有不同 Angular 色的 User 模型，我使用 json-server模拟一些后端基础知识。我需要进行基本身份验证 - 即我需要我的用户能够登录并将其 session 保存在某处(因为他不需要每次刷新浏览器时都登录)。我有一个 db.json 文件，其中已经有一些用户:

{
    "users": [
        {
            "login": "admin",
            "password": "password",
            "role": "admin",
            "id": 1
        }
    ]
}

这是我的用户模型:

var User = Backbone.Model.extend({
    defaults: {
        login: "",
        password: "",
        role: ""
    },
    // Updated
    url: function () {
        return "http://localhost:3000/users?login=" + 
                   this.attributes.login + "&password=" + this.attributes.password;
    }
});

我不太清楚如何管理身份验证(即以表单输入登录名和密码并在没有适当后端的情况下存储用户 session )。我想过在我的 User 模型中创建一个 token 字段，并在每次用户登录时填写并将其保存在 cookie 中，但我不知道该怎么做不管怎样。如果有人能帮助我完成这项任务，我将不胜感激。

添加这是我认为的登录功能:

signIn: function () {
    var login = $('#js-login').val();
    var password = $('#js-password').val();

    if (login && password) {
        var currentUser = new User({
            login: login,
            password: password
        });
        currentUser.fetch({
            success: function () {
                console.log(currentUser.toJSON());
            },
            error: function (err) {
                console.log(err);
            }
        });
    }
}

但它不是从我的 json 服务器中查找用户，而是创建一个新用户，其属性除 #js-login 和 #js-password 的值外都是空的> 输入字段

添加我想我应该通过上面的url中的查询在我的集合中找到我的用户，但我实际上不知道如何管理它

Repo with my project

Answer 1

这是您的应用的简化流程:

• 每次用户打开您的网站时，请检查他的 cookie。

  • 如果 cookie 包含用户信息(保存的用户名、密码)，请检查与数据库中的信息是否匹配。如果匹配，则转到主页。否则，清除cookie，进入登录页面

  • 如果 cookie 不包含用户信息，请转到登录页面

• 在登录页面，用户成功登录后，将用户信息保存到cookie中，以便下次查看。

您可以使用某种机制对用户信息( token 、加密...)进行编码，以保护存储在 cookie/ session 中的信息。但是在客户端存储身份验证数据库确实是安全薄弱点。示例代码如下:

型号:

var User = Backbone.Model.extend({
    url: function () {
        return "users?login" + this.attributes.login + "&password=" + this.attributes.password;
    },

    isAdmin: function () {
        return (this.get("role") == "admin");
    }
});

您认为:

// Load username password from cookie (just simple example)
var username = $.cookie("username"),
    password = $.cookie("password");

if (username && password) {
    var userModel = new User({
        login: username,
        password: password
    });
    userModel.fetch({
        success: function () {
            if (userModel.isAdmin) {
                // e.g. go to admin page
            } else {
                // e.g. go to normal user page
            }

            // Save to cookie/session here
        },
        error: function () {
            // Go to login page
        }
    });
} else {
    // Go to login page
}

关于cookie，可以引用How do I set/unset cookie with jQuery?

关于获取用户名/密码输入表单，您可以使用简单的 jquery 选择器(很容易通过 google 搜索，例如 https://www.formget.com/jquery-login-form/ )