无后端的用户认证

Question

我有一个简单的 Backbone.js 应用程序，其中包含具有不同角色的 User 模型，我使用 json-server 来模拟一些后端基础知识。我需要进行基本身份验证——即我需要我的用户能够登录并在某处保存他的会话（因为他每次刷新浏览器时都不需要登录）。我有一个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 并在没有适当后端的情况下存储用户会话）。我想过在我的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-server 中查找用户，它只是创建一个新用户，除了 #js-login 和 #js-password 输入字段的值之外，所有属性都为空

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

Repo with my project

Answer 1

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

我不会详细介绍，因为文档很清楚。 这是指使用jquery进行身份验证

现在如果您想使用backbone.js 对用户进行身份验证

如果路由返回 {loggedIn: false}，则骨干路由器只会将用户发送到登录/注册页面。但如果它返回一个用户个人资料信息，那么显然意味着他有一个会话。

连接 $.ajax 以响应 401（未授权）状态代码。

还要提及this stackoverflow 线程

希望对你有所帮助。

Here 是使用backbone.js 进行身份验证的分步指南

Answer 2

这是您应用的简化流程：

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

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

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

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

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

型号：

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 选择器（很容易用谷歌搜索，例如https://www.formget.com/jquery-login-form/）