没有后端的用户身份验证

时间:2016-10-13 10:43:43

标签: javascript jquery session backbone.js login

我有一个简单的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;
    }
});

我不能很好地管理身份验证(即在表单中输入loginpassword并在没有适当后端的情况下存储用户会话)。我考虑在token模型中创建User字段,并在每次用户登录并将其保存在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输入字段的值

已添加我想我应该通过我的收藏中的url上的查询找到我的用户,但我实际上并没有得到如何管理

Repo with my project

2 个答案:

答案 0 :(得分:1)

这是您应用的简化流程:

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

    • 如果Cookie包含用户信息(保存的用户名,密码),请选中与数据库中的信息匹配。如果匹配,请转到主页。否则,清除cookie,转到登录页面

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

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

您可以使用某种机制对用户信息(令牌,加密......)进行编码,以保护存储在Cookie /会话中的信息。但是客户端中的存储认证DB确实是一个很弱的安全点。示例代码如下:

型号:

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/

答案 1 :(得分:0)

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

由于文件很清楚,我不会详细介绍。 这是指使用jquery进行身份验证

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

对用户进行身份验证

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

  

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

另外提及this stackoverflow线程

中所述

希望它可以帮到你一点。

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