Django + Backbone：用於登錄/註銷的下劃線模板

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 
} 

在帳戶模型中，您有登錄和註銷的方法。 在登錄方法你通過用戶名和密碼PARAMS作爲數據做出請求：請求完成

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

在請求頭，你可以有通過令牌或用戶名/密碼組合的授權。在您的app.js中，我們可以覆蓋Backbone.sync方法來插入授權標頭，因此所有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屬性。 也許這可以引導你正確的解決方案。