Django + Backbone : 로그인/로그 아웃 템플릿 밑줄

Question

Django 및 Backbone을 사용하여 SPA를 구축 중입니다. 지금까지 대부분의 템플릿은 Django 측에 있었지만 지금은 Backbone/Underscore를 사용하여 템플릿으로 이동 중입니다. 내가 확신 할 수없는 유일한 점은 인증과 관련하여 페이지를 다시로드하는 방법을 관리하는 것입니다.

별도의 로그인 페이지가 아니라 앱의 메뉴 막대 (부트 스트랩 탐색 바)에 드롭 다운 로그인 양식이있어서 $.ajax 로그인/아웃 작업을 요청합니다. 나는 앱 인터페이스를 공개적으로 사용 가능하게 유지하고 사용자가 로그인 할 때 특정 구성 요소 (로드, 저장, 내보내기 버튼) 만 렌더링하고, 로그 아웃 할 때는 해당 구성 요소를 숨기려고합니다. 페이지를 새로 고치려면 사용자가 로그인했는지 여부를 알아야합니다. 이것은 내가 내 장고 템플릿을 관리하고있어 방법은 다음과 같습니다

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

이 조건부 렌더링 돌보는 장고 템플릿 태그와 매우 잘 작동합니다. 밑줄 버전은별로 다르게 보일 수는 없지만 사용자가 클라이언트 쪽에서 로그 아웃했는지 여부를 어떻게 결정합니까? 나는 이것에 대한 응답 헤더를 추가하는 것을 고려하고있다. 그러나 장고 메소드를 내장하고 있는가? login_required 뷰 데코레이터를 살펴 봤지만 사용자가 로그 아웃 할 때 리디렉션이 필요합니다.

Answer 1

토큰을 통한 인증을 관리 할 수 ​​있습니다.

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

계정 모델에는 로그인 및 로그 아웃 방법이 있습니다. 로그인 방법에 당신은 사용자 이름을 통과하고, 데이터와 같은 암호 PARAMS를 만들기 위해 요청 : 요청이 우리가 토큰을 얻고 데이터를 localStorage.authToken하도록 설정 약속 콜백을받을 완료

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

후. 이제 사용자에게 인증을 확인하는 다른 방법을 사용할 수 있습니다.

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

그리고 당신은 작업 로그 아웃을 할 경우, 단지 로컬 스토리지에서 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 속성이 있는지 확인하는 것입니다. 아마도 올바른 해결책을 제시 할 수 있습니다.