Question

我正在使用Django和Backbone构建SPA。到目前为止，我的大多数模板都在Django上，但我现在正在使用Backbone / Underscore模板化。我唯一不确定的是如何管理与身份验证相关的页面重新加载。

我没有单独的登录页面，而是应用程序菜单栏（Bootstrap导航栏）上的下拉登录表单，这会使$.ajax请求登录/退出操作。我想保持应用程序界面公开可用，并且只在用户登录时呈现某些组件（加载，保存，导出按钮），在注销时隐藏它们。页面重新加载显然必须知道用户是否已登录。这就是我在Django模板中管理它的方式：

<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
      <!-- Menu left -->
      <ul class="nav navbar-nav">
         <!-- li components... -->
      </ul>
      <!-- Menu right -->
      <ul class="nav navbar-nav pull-right" id="navbar-right">
         {% if user.is_authenticated %}
         <!-- If user is logged in render 'My Account' and 'Logout' components -->
         <li id='menu-account'><a href='#'>My Account</a></li>
         <li id='menu-logout'><a href='#'>Logout</a></li>
         {% else %}
         <!-- If logged out render the login form -->
         <li id="menu-register"><a href="#">Register</a></li>
         <li class="dropdown" id="menu-login">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false" id="nav-login">Login</a>
            <div class="dropdown-menu pull-right">
               <form role="form" id="form-login" action="login/" method="POST">
                  <input class="form-control" name="username" id="username" placeholder="Username" type="text"><br>
                  <input class="form-control" name="password" id="password" placeholder="Password" type="password"><br>
                  <button type="submit" id="btn-login" class="btn btn-default">Login</button>
               </form>
            </div>
         </li>
         {% endif %}
      </ul>
   </div>
</nav>

这非常好用，Django模板标签负责条件渲染。下划线版本可能看起来不会有太大不同，但我如何确定用户是否从客户端登录/注销？我正在考虑为此添加响应头，但是有内置的Django方法吗？我查看了login_required视图装饰器，但似乎需要在用户注销时进行重定向。

Answer 1

您可以通过令牌管理身份验证。

var Account = Backbone.Model.extend({
    defaults: {
        authToken: undefined
}

在帐户模型中，您有登录和注销的方法。在登录方法中，您传递用户名和密码参数作为数据来发出请求：

login: function(username, password) {
    var self = this;
    return $.ajax({
            url: someUrl
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                username: username,
                password: password
            })
        }).done(function(data) {
                console.log("login successful, saving auth token");
                localStorage.authToken = data.token;
                self.set("authToken", data.token);
        })
}

请求完成后，我们得到promise回调，我们获取令牌并将其设置为localStorage.authToken数据。现在我们可以使用另一种方法来检查用户的身份验证。

isAuthenticated: function() {
    return (this.get("authToken") !== undefined);
}

如果你想让logout工作，只需从localStorage中删除authToken：

logout: function() {
    this.set("authToken", undefined);
    delete localStorage.authToken;
}

在请求标头中，您可以通过令牌或用户名/密码组合进行授权。在你的app.js中我们可以覆盖Backbone.sync方法来注入Authorization标头，所以默认情况下所有的Backbone同步调用都是授权的。

var backboneSync = Backbone.sync;
Backbone.sync = function (method, model, options) {
    if (account.isUserAuthenticated()) {
        options.headers = {
            "Authorization": "Token " + account.get("authToken")
        };
    }
    return backboneSync(method, model, options);
};

这是令牌认证的示例 - 用户输入他的用户名和密码以获取令牌。存储在客户端（localStorage）的令牌。所以整个逻辑是检查我们是否有authToken属性。也许这可以指导您正确的解决方案。

Django + Backbone：用于登录/注销的下划线模板

1 个答案: