平均：

Question

[Q1] HTTPインターセプタは、config.headers ["Authorization"]（フロントエンドAngularJS）を変更して、要求を確認してトークンの値を格納する際のメリットreq.cookiesオブジェクト？ （バックエンドNodeJS）

JSON Webトークンの機能を理解しようとしています。私がセットアップしたデモアプリケーションには、ログイン機能があります。

1. GET '/ login'では、トークンを生成できます。そのトークンでクッキーを設定できます。
2. フロントエンドでは、トークンを含むJSONオブジェクトにアクセスできます。
3. 開発者コンソールでCookieを表示できます。

Nodejs：

index.js - ログイン経路

router.post('/login', function(req, res, next) { 
    Authenticator.find(req.cookies.token, req.body, Heartbeat.common, function(err, warning, data){ 
    if(err) { 
     res.status(404).send({token:false, warning: null, error:err}); 
    } else if(warning){ 
     res.status(200).send({token:true, warning: warning, error:null}); 
    } else { 
     res.cookie('token', data, {maxAge: 3600000, httpOnly:true}); 
     res.status(200).json({token:true, error: null}); 
    } 
    }); 
}); 

Authenticator.ctrl.js - Authenticator.find（）

find: function(token, user, heartbeat, callback) { 
    if(!token) { 
    Auth.findOne({email:user.email}, function(err, data){ 
     if(err) { 
     console.log(err); 
     } else { 
     if(data) { 
      if(data.checkHash(user.password)) { 
      callback(null, null,TokenMaker.createToken(user.email, heartbeat)); 
      } else { 
      callback(Errors.login.strict.MISMATCH, null, null); 
      } 
     } else { 
      callback(Errors.login.strict.NOT_REGISTERED, null, null); 
     } 
     } 
    }); 
    } else { 
    callback(null, Errors.login.warning.ACTIVE_REFRESH, null); 
    } 
}, 

角度コントローラ

app.controller('userAccessCtrl', ['$scope', '$http', function ($scope, $http){ 
    $scope.user = { 
    email: "someone@some.com", 
    password: "12345679" 
    }; 
    $scope.error = {}; 
    $scope.loginAccess = function(user) { 
    var submitReady = true; 
    var emailStatus = EmailValidator.email(user.email); 
    var passwordStatus = EmailValidator.password(user.password); 
    if(typeof emailStatus === "string") { 
     $scope.error.email = emailStatus; 
     submitReady = false; 
    } 
    if(typeof passwordStatus === "string") { 
     $scope.error.password = passwordStatus; 
     submitReady = false; 
    } 
    if(submitReady) { 
     $scope.error = {} 
     var data = $scope.user; 
     $scope.user = {}; 
     $http.post('/login', data) 
     .then(function(success){ 
      console.log(success); 
      },function(error){ 
      console.log(error); 
     }); 
    } 

} 
}]); 

コンソールの応答：

{ 
    "data": { 
    "token":true, 
    "error":null 
    }, 
    "status":200, 
    "config":{ 
    "method":"POST", 
    "transformRequest":[null], 
    "transformResponse":[null], 
    "url":"/login", 
    "data":{ 
     "email":"someone@some.com", 
     "password":"12345679" 
    }, 
    "headers":{ 
     "Accept":"application/json, text/plain, */*", 
     "Content-Type":"application/json;charset=utf-8" 
    } 
    }, 
    "statusText":"OK" 
} 

Answer 1

は、実際には、クッキーとJWTトークンを使用して間違っているのです。 JWTトークンは、Cookieよりも認証に優れています。 トークンを使用する場合、サーバーはメモリのデータベースにセッションを保存する必要はありません。これはアプリケーションにとって大きな利点です。サーバー間でセッションを同期する方法を考えずにアプリケーションを拡張し、新しいサーバーを追加できます。短い言葉で

、あなたはJWTを使用するときに、あなたの流れは次のトークンは：（あなたはそれが角度のケースで）

• フロントエンドは、ログインとパスワードに/ログインルート
• バックエンドのチェックの資格情報を送信し、返信トークン（リクエストボディではなく、クッキー中）
• フロントエンドアプリはブラウザ

• のローカルストレージやセッションストレージにトークンを保存し、あなたは、バックエンドにすべての要求をインターセプトし、それが「認可」ヒードを添付しますどのHTTPのInterceptorを書くことができますすべての要求にR、それは次のようになります。

  認証：ベアラがここ-ある-あなた-JWT-トークン

• バックエンドは、この認証ヘッダーをチェックし、それが正しいかどうか（どのように検証を読み取るためにhttp://jwt.ioを見ることができます作品）バックエンドはあなたの要求に応えることができます。