AngularJSコンポーネントとADAL（JSのActive Directory Azureライブラリ）

Question

コンポーネントパターンを使用して、TypeScriptとコンポーネントルータを使用してAngularJSに角度1.6のアプリケーションを構築しました。

は、今私はADALライブラリとベアラトークンを受け入れ、安全なAPIを使用してAzureADに認証しようとしています。私はAngularJS 1.3で構築された、現在のアプリケーションの一つで

、私はかなり標準的な方法でADALを使用して、私はStateProviderのRequireAdLogin属性でリソース（API）への認証：

var homeState = { 
    url: "/", 
    requireADLogin: true 
    }; 

これは正常に動作しますが、今私は（タイプ/角度-UI-ルータ @付き）角度-UI-ルータとコンポーネントのルーターを使用しています：

import * as angular from 'angular'; 
import { State, StateProvider } from 'angular-ui-router'; 
import { MyComponent } from './my.component'; 
import { NavService, NavItem } from './../../common/nav/nav.service'; 
import { MediaService } from "./MediaService .service"; 

function routeConfig($stateProvider: StateProvider) { 
    "ngInject"; 

    $stateProvider 
    .state('app.media', { 
     url: '/media', 
     component: 'media' 
    }); 

問題がある、私はAPI tを取得することはできませんトークンを受け取る。私は属性は.IComponentOptionsタイピングと状態タイプから欠落しているrequireADLoginに気づいたとき、トラブルの最初の兆候があるので、私はこれを行うことはできません。私はその後、いくつかの研究を行なったし、この出くわした

.state('app.media', { url: '/media', component: 'media', requireADLogin: true // THIS DOES NOT COMPILE! }); 

むしろ憂鬱ポスト：

GitHubのADALディスカッション：

https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/283

これを下に移動しないでくださいパス。コンポーネントルータは非推奨ですhttps://docs.angularjs.org/guide/component-router

Doh！さて、これは今私がブロックされているように、少なくとも私にとっては最悪のニュースではありません。私は周りにいくつかの回避策があるように感じますが、私はそれを見ることができません。

私はちょうどAPIのHTTPヘッダーに、ストレージに保存されているベアラ・トークンを供給する必要があるとして、HTTPのInterceptorは、解決策になるかもしれないカスタムを書くことだと思います。

https://github.com/AzureAD/microsoft-authentication-library-for-js

しかし、これは私のニーズには低すぎるレベルだ：また、私はJSのためにMSの認証ライブラリを見てきました。

私は活字体と、この新しいコンポーネントパターンで動作するようにAngularJS用ADALの角度ライブラリを取得するにはかなり難しかった、言及する必要があります。優先パスはAngular 2.0ですが、NG2のこの時点での書き換えはこのプロジェクトが時間枠に入れられているため実行可能ではありません。

私は手動でのストレージ・メカニズム（私の場合は、ブラウザのセッションストレージ）からのベアラ・トークンを抽出し、それを自分のWebサービス上のすべての要求を追加することによってこの問題を解決した

Answer 1

：

var accessToken = sessionStorage.getItem("adal.access.token.key" + 
     sessionStorage.getItem("adal.token.keys").replace("|", "")); 

configObj.headers = { 'Authorization': 'Bearer ' + accessToken } 

私は、その構成オブジェクトを渡します各リクエストにはトークンがあり、APIがそれを受け入れ、誰もが満足しています。

this.$http.get(url, configObj).then(resolveData, errorCall);