Django + Backbone：ログイン/ログアウト用のアンダースコアテンプレート

Question

DjangoとBackboneを使用してSPAを構築しています。これまで私のテンプレートの大半はDjango側にありましたが、私は現在、Backbone/Underscoreを使ってテンプレートを作成しています。私が確信しているのは、認証に関してページリロードを管理する方法だけです。

別のログインページではなく、アプリのメニューバー（ブートストラップナビバー）にドロップダウンログインフォームがあり、$.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メソッドをオーバーライドして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プロパティがあるかどうかを確認することです。 これは適切な解決方法を導くかもしれません。