3

nodejs、express、angularjs アプリに jwt 認証を実装しようとしています。これまでのところ、トークンを生成し、localStorage. このチュートリアルに従って、次のように in angular factory を実装しましauthInterceptorた。

app.factory('authInterceptor', function ($rootScope, $q, $window) {
  return {
    request: function (config) {
      config.headers = config.headers || {};
      if ($window.localStorage.myToken) {
        config.headers.Authorization = 'Bearer ' + $window.localStorage.myToken;

      }
      return config;
    },
    response: function (response) {
      if (response.status === "401") {
        $window.location.replace('/dash');
      }
      return response || $q.when(response);
    }
  };
});

次のように、インターセプターを構成ファイルにプッシュしました。

$httpProvider.interceptors.push('authInterceptor');

これまでのところ、認証情報をサーバーに送信し、トークンを生成して に保存しましたlocalStorage

そのため、localStorage からトークンを削除しておらず、トークンの有効期限が切れていない限り、トークンは存続するはずです。angularjsのバックグラウンドajax呼び出しを使用して、ロードされたページ内からリクエストを行うと、認証ヘッダーが想定どおりに設定されます。

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYSIsInR5cGUiOiJzYWxlcyIsImlhdCI6MTQyMjI2MDExMCwiZXhwIjoxNDIyMjc4MTEwfQ.Iv6W-Tc8Qm4FGclzmgbtjvWFz_tyDwEvrFmMmucONpY

ただし、新しいルートに移動しても、リクエストもレスポンスも傍受されません。たとえば、「/sales」ルートがあります。しかし、アドレスバーから販売ルートに移動すると、インターセプターによってリクエスト認証ヘッダーが設定されないため、サーバーから認証エラー 401 が返されますが、これもインターセプトされません。したがって、にリダイレクトしません/dash

エラーのリンクと、承認されていないルート '/sales' への GET 要求のヘッダーは次のとおりです。 401 エラー時の要求および応答ヘッダー

4

2 に答える 2