読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1 + Django REST Frameworkに再挑戦 その6 ngCookies for JWT Token

概要

AngularJS1 + Django REST Frameworkに再挑戦 その6 ngCookies for JWT Token

参考動画

Django + AngularJS | Coding For Entrepreneurs

ngCookies for JWT Token

  • 前回の続きで、今回は、JWT によって発行されたtokenを使って、angularJSからのログインを実装する。

  • その為には、ngCookiesというライブラリ?を利用する。

公式サイト:

https://docs.angularjs.org/api/ngCookies

  • これを利用するには、home.htmlで、読み込む必要あり!
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-cookies.js'></script>
  • さらにapp.module.jsにいつものように追記する。
'ngCookies',
  • login-detai.component.jsに追記する。
...
controller: function(
                $cookies,
...
  • いよいよtokenをcookieのputメソッドを利用して、入力してみる。
requestAction.success(function(r_data, r_status, r_headers, r_config){
                    console.log(r_data) //tokenをゲットできる。
                    $cookies.put("token", r_data.token) // r_data.tokenを"token"としてcookieに送付できる。
                })
  • さらに、var tokenExists = $cookies.get("token")で、入力したtokenをtokenExistsに代入する。

  • tokenExistsがある場合だけ、loginができるような下準備をする。

var tokenExists = $cookies.get("token")
            if (tokenExists) {
                // verify token
                $scope.loggedIn = true;
            }
  • cookiesにusernameも渡すようにしておく。あとあと使うのかな?
requestAction.success(function(r_data, r_status, r_headers, r_config){
                    // console.log(r_data) //tokenをゲットできる。
                    $cookies.put("token", r_data.token) // r_data.tokenを"token"としてcookieに送付できる。
                    $cookies.put("username", user.username) // usernameもcookiesに入れておく。なぜだ?
                })
  • これでログインしてみる。。。特に何も起きない。。。なぜだ。

  • cookieにはちゃんと渡せているか、blog-list.component.jsを使って実験してみる。

controller: function(Post, $cookies, $location, $routeParams, $rootScope, $scope){
            // console.log($location.search())
            console.log($cookies.get("username"))
            console.log($cookies.get("token"))
  • OK!ちゃんと表示されている!

  • navbarにログインボタンを表示させたいので、try-nav.htmlに追記する。

<li><a ng-href="/login" ng-hide='userLoggedIn'>Login</a></li>
  • さらに、try-nav.directive.jsにuserLoggedInの条件分岐を追記する。
scope.userLoggedIn = false
            var token = $cookies.get("token")
            console.log(token)
            if (token) {
                scope.userLoggedIn = true
            }
  • これで、tokenがあるときは、userLoggedInがtrueになり、結果的に、loginしているときは、loginボタンが表示されないようになる。

  • tokenは、最低限の仕事を終えたら、cookieから削除するため、以下の通り、tokenを削除するコードをlogin-detail.component.javascriptに追記する。usernameは、cokkiesからゲットして、scope.userの辞書に加えておく。

var tokenExists = $cookies.get("token")
            if (tokenExists) {
                // verify token
                $scope.loggedIn = true;
                $cookies.remove("token")
                $scope.user = {
                    username: $cookies.get("username")
                }
            }
  • ログインに成功したとき用のlocationも追記しておく。
requestAction.success(function(r_data, r_status, r_headers, r_config){
...
                    $location.path("/")
...
                })
  • おー、ログインに成功したらトップ画面が表示されるようになった〜!

  • ただ現状では、loginボタンがうまく消えない。ので、try-nav.directive.jsを修正する。$watchを使う。$watchは、対象の関数、変数などが変化したときに監視して、処理してくれる便利なメソドぽい。

scope.userLoggedIn = false
            scope.$watch(function(){
                var token = $cookies.get("token")
                // console.log(token)
                if (token) {
                    scope.userLoggedIn = true
                } else {
                    scope.userLoggedIn = false
                }
            })
  • オーー、ログインしたら消えた〜!

  • ログアウトボタンも<li><a ng-href="/logout" ng-show='userLoggedIn'>Logout</a></li>で作成してみる。loginの時と逆で、userLoggedInが、trueの時に現れる。loginの時にtokenが削除されているので、logoutをクリックすると、userloggedinが、falseになる。

  • さらに、app.config.jsにroutingを追記する。logoutにアクセスしたときは、自動で、loginにredirectするように設定する。

              when("/logout", {
                  // template: "<login-detail></login-detail>"
                  redirectTo: '/login'
              }).
  • user情報をDRFに渡す->tokenを取得する->tokenをcookieに代入する->ログイン認証するという一連の流れでapiは認証するのか。