概要

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

...
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は認証するのか。

Djangoroidの奮闘記

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

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

概要

参考動画

ngCookies for JWT Token