没有 back-end 的用户身份验证

Question

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

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

这是我的 User 模型：

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

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

ADDDED 在我看来这是我的登录功能：

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-server 中找到用户，而是创建了一个新用户，除了 #js-login 和 #js-password 输入字段

的值外，所有属性都是空的

ADDED 我想我应该在我的 collection 中通过上面 url 中的查询找到我的用户，但我实际上并不知道我是怎么做的会管理

Repo with my project

Answer 1

这是您应用的简化流程：

每次用户打开您的网站时，检查他的 cookies。
- 如果 cookie 包含用户信息（保存的用户名、密码），请检查是否与您的数据库中的信息匹配。如果匹配，请转到主页。否则，清除cookies，进入登录页面
- 如果 cookie 不包含用户信息，请转到登录页面
登录页面，用户登录成功后，将用户信息保存到cookies中，以便下次查看。

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

型号：

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?

关于获取username/password输入表单，您可以使用简单的jquery选择器（很容易google，例如https://www.formget.com/jquery-login-form/）

Answer 2

在这里你可以参考这个插件，它主要使用文档中提到的jquery功能here

我不会详细介绍，因为文档非常清楚。这是指使用 jquery

进行身份验证

现在，如果您想使用 backbone.js

对用户进行身份验证

如果路由返回 {loggedIn: false}，backbone 路由器只会将用户发送到 login/register 页面。但是，如果返回的是用户个人资料信息，则显然意味着他有一个会话。

wire up $.ajax to respond to 401 (Unauthorized) status codes.

还要提及this Whosebug thread

希望能对您有所帮助。

Here 是使用 backbone.js

进行身份验证的分步指南

没有 back-end 的用户身份验证

User authentication without back-end

javascript

session

jquery

login

backbone.js