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

Question

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

我没有单独的登录页面，而是在应用程序的菜单栏（Bootstrap 导航栏）上有一个下拉登录表单，这使得 $.ajax 请求 login/out 操作.我想让应用程序界面公开可用，并且只在用户登录时呈现某些组件（加载、保存、导出按钮），在注销时隐藏它们。页面重新加载显然必须知道用户是否登录。这就是我在我的 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 模板标签负责条件渲染。下划线版本可能看起来没什么不同，但我如何确定用户是否从客户端登录 in/out？我正在考虑为此添加一个响应 header，但是有 built-in 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);
        })
}

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

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

如果你想让注销生效，只需从 localStorage 中删除 authToken：

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

在请求header中，您可以通过令牌或username/password组合获得授权。在您的 app.js 中，我们可以覆盖 Backbone.sync 方法来注入授权 header，因此所有 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);
};

这是令牌身份验证的示例 - 用户输入他的用户名和密码以获得令牌。令牌存储在 client-side (localStorage) 上。所以整个逻辑是检查我们是否有 authToken 属性。也许这可以指导您找到正确的解决方案。

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

Django + Backbone: underscore template for login / logout

django

authentication

backbone.js

login

underscore.js-templating