javascript - 第一次通过 $http 访问 ADAL "protected"URL 时，应用程序正在重新初始化

Question

我有一个基于 Angular SPA ADAL 示例的松散页面 here

从 MS 登录页面返回并访问受 AAD 保护的 API 后， Angular .config() 函数被调用 3 次。这会中断在应用程序的第一个实例中启动的范围更新。经过最初的颠簸后，一切都按预期进行。即使重新加载页面也不会重现此问题。仅在登录后第一次发生。

ADAL 这正常吗？有办法避免这种情况吗？我没有通过 AJAX 回调正确更新 $scope 吗？

下面是一些关键代码片段:

app.js:

'use strict';
angular.module('app', ['ngRoute', 'AdalAngular'])
.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', '$locationProvider', function ($routeProvider, $httpProvider, adalProvider, $locationProvider) {

$routeProvider.when("/visit", {
    controller: "visitCtrl",
    templateUrl: "/ngViews/Visit.html",
    requireADLogin: false,
}).when("/visit/:visitNumber", {
    controller: "visitCtrl",
    templateUrl: "/ngViews/Visit.html",
    requireADLogin: false,
}).when("/", {
    controller: "homeCtrl",
    templateUrl: "/ngViews/Home.html",
    requireADLogin: false,
}).when("/teamwork", {
    controller: "teamworkCtrl",
    templateUrl: "/ngViews/Teamwork.html",
    requireADLogin: false,
}).when("/mywork", {
    controller: "myWorkCtrl",
    templateUrl: "/ngViews/MyWork.html",
    requireADLogin: false,
}).when("/dashboard", {
    controller: "dashboardCtrl",
    templateUrl: "/ngViews/Dashboard.html",
    requireADLogin: false,
}).when("/error", {
    templateUrl: "/ngViews/Error.html",
    controller: "errorCtrl",
    requireADLogin: false,
});
$routeProvider.otherwise({ redirectTo: '/' }); // needed to avoid a bug in ADAL see: https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/42


var endpoints = cmSettings.adalEndpoints;
//$locationProvider.html5Mode(true); // breaks ADAL
adalProvider.init(
    {
        instance: cmSettings.aadInstance,
        tenant: cmSettings.tenant,
        clientId: cmSettings.clientId,
        extraQueryParameter: 'nux=1',
        endpoints: endpoints,
        cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.  
        // Also, token acquisition for the To Go API will fail in IE when running on localhost, due to IE security restrictions.
    },
    $httpProvider
    );
}]);

Controller :

'use strict'
angular.module('app')
.controller('navBarCtrl',   ['$scope', '$location', 'visitsSvc', '$timeout',    function ($scope, $location, visitsSvc, $timeout) {
$scope.myWorkCount = 0;
$scope.teamworkCount = 0;
$scope.loading = false;

var updateVisitCount = function () {
    $scope.loading = true;
    $scope.$on("cm:myVisitsReceived", function (event, args) {
        $timeout(function () {
            if (args.data) {
                $scope.myWorkCount = args.data.length;
            }
            $scope.loading = false;
        });
    });

    $scope.$on("cm:teamVisitsReceived", function (event, args) {
        $timeout(function () {
            if (args.data) {
                $scope.teamworkCount = args.data.length;
            }
            $scope.loading = false;
        });
    });

    visitsSvc.getMyVisits();
    visitsSvc.getTeamVisits();
}

if ($scope.userInfo.isAuthenticated && !$scope.loading) {
    updateVisitCount();
} else {
    $scope.$on("adal:loginSuccess", function (scope) {
        updateVisitCount();
    });
}
}]);

数据服务:

angular.module('app')
.factory('visitsSvc', ['$http', '$rootScope', function ($http, $rootScope) {



    $http.defaults.useXDomain = true;
    delete $http.defaults.headers.common['X-Requested-With'];

    return {
        getMyVisits: function () {
            $http.get(cmSettings.apiUrl + '/api/v1/visits/my').success(function (data, status, headers, config) {
                $rootScope.$broadcast("cm:myVisitsReceived", { data: data, status: status, success: true });
            })
           .error(function (data, status, headers, config) {
               $rootScope.$broadcast("cm:myVisitsReceived", { data: data, status: status, success: false });
           });
        },
        getTeamVisits: function () {
            $http.get(cmSettings.apiUrl + '/api/v1/visits/team').success(function (data, status, headers, config) {
                $rootScope.$broadcast("cm:teamVisitsReceived", { data: data, status: status, success: true });
            })
           .error(function (data, status, headers, config) {
               $rootScope.$broadcast("cm:teamVisitsReceived", { data: data, status: status, success: false });
           });
        },
        getVisit: function (visitNumber) {
            $http.get(cmSettings.apiUrl + '/api/v1/visits/' + visitNumber).success(function (data, status, headers, config) {
                $rootScope.$broadcast("cm:visitsReceived", { data: data, status: status, success: true });
            })
           .error(function (data, status, headers, config) {
               $rootScope.$broadcast("cm:visitsReceived", { data: data, status: status, success: false });
           });;
        },
        search: function (searchTerms) {
            return $http.get(cmSettings.apiUrl + '/api/v1/visits/search/' + searchTerms).success(function (data, status, headers, config) {
                $rootScope.$broadcast("cm:searchVisitsReceived", { data: data, status: status, success: true });
            })
           .error(function (data, status, headers, config) {
               $rootScope.$broadcast("cm:searchVisitsReceived", { data: data, status: status, success: false });
           });
        },
    };
}])

控制台输出:

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
File: authorize
HTML1300: Navigation occurred.
File: login
HTML1200: microsoftonline.com is on the Internet Explorer Compatibility View List ('C:\Users\Micah\AppData\Local\Microsoft\Internet Explorer\IECompatData\iecompatdata.xml').
File: login
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
File: authorize
HTML1506: Unexpected token.
File: localhost:44300, Line: 115, Column: 1
The returned id_token is not parseable.
The returned id_token is not parseable.
State: 0edacc1d-a253-42ac-8a1d-cf1206ad3beb
State status:true
State is right
renewToken is called for resource:https://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Renew token Expected state: ca98c6f9-7a16-4744-828f-351cffedec9b|https://cloudmedIdentity.onmicrosoft.com/dataApi
Navigate url:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=ca98c6f9-7a16-4744-828f-351cffedec9b%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2
Navigate to:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=ca98c6f9-7a16-4744-828f-351cffedec9b%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2&prompt=none&login_hint=Test1%40cloudMedIdentity.onmicrosoft.com&domain_hint=cloudMedIdentity.onmicrosoft.com&nonce=220c7d60-d07a-449d-bbcf-dd4cd053365a
LoadFrame: adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
renewToken is called for resource:https://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Renew token Expected state: ca355b60-742a-48c2-8b8c-cd46a1b9b620|https://cloudmedIdentity.onmicrosoft.com/dataApi
Navigate url:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=ca355b60-742a-48c2-8b8c-cd46a1b9b620%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2
Navigate to:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=ca355b60-742a-48c2-8b8c-cd46a1b9b620%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2&prompt=none&login_hint=Test1%40cloudMedIdentity.onmicrosoft.com&domain_hint=cloudMedIdentity.onmicrosoft.com&nonce=c204e5c3-9d07-42e3-9787-2e340935ab8c
LoadFrame: adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
LoadFrame: adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
renewToken is called for resource:https://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Renew token Expected state: fdc47862-650b-411b-b59f-98cbf13b5715|https://cloudmedIdentity.onmicrosoft.com/dataApi
Navigate url:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=fdc47862-650b-411b-b59f-98cbf13b5715%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2
Navigate to:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=fdc47862-650b-411b-b59f-98cbf13b5715%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2&prompt=none&login_hint=Test1%40cloudMedIdentity.onmicrosoft.com&domain_hint=cloudMedIdentity.onmicrosoft.com&nonce=2f110029-8c7a-4584-aaae-b9a68284b3d9
LoadFrame: adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
LoadFrame: adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
renewToken is called for resource:https://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Renew token Expected state: 46dce352-c78b-453e-993d-7b43dbfee4c0|https://cloudmedIdentity.onmicrosoft.com/dataApi
Navigate url:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=46dce352-c78b-453e-993d-7b43dbfee4c0%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2
Navigate to:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=46dce352-c78b-453e-993d-7b43dbfee4c0%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2&prompt=none&login_hint=Test1%40cloudMedIdentity.onmicrosoft.com&domain_hint=cloudMedIdentity.onmicrosoft.com&nonce=ef3226f4-0c07-4dff-ad99-36dde840f7ee
LoadFrame: adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
renewToken is called for resource:https://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Renew token Expected state: e392c56e-5298-41cf-9f0b-4f0bed985b3d|https://cloudmedIdentity.onmicrosoft.com/dataApi
Navigate url:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=e392c56e-5298-41cf-9f0b-4f0bed985b3d%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2
Navigate to:https://login.microsoftonline.com/cloudMedIdentity.onmicrosoft.com/oauth2/authorize?response_type=token&client_id=96408f66-4eab-4c44-8e59-eed93746bf8f&resource=https%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&redirect_uri=http%3A%2F%2Flocalhost%3A44300%2F&state=e392c56e-5298-41cf-9f0b-4f0bed985b3d%7Chttps%3A%2F%2FcloudmedIdentity.onmicrosoft.com%2FdataApi&nux=1&x-client-SKU=Js&x-client-Ver=1.0.2&prompt=none&login_hint=Test1%40cloudMedIdentity.onmicrosoft.com&domain_hint=cloudMedIdentity.onmicrosoft.com&nonce=c09911ac-c4ff-495f-b0a8-19931c82b902
LoadFrame: adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
State: ca98c6f9-7a16-4744-828f-351cffedec9b|https://cloudmedIdentity.onmicrosoft.com/dataApi
State status:true
State is right
Fragment has access token
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
LoadFrame: adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
Add adal frame to document:adalRenewFramehttps://cloudmedIdentity.onmicrosoft.com/dataApi
State: 46dce352-c78b-453e-993d-7b43dbfee4c0|https://cloudmedIdentity.onmicrosoft.com/dataApi
State status:true
State is right
Fragment has access token

Answer 1

您可以将 AzureAD:true 设置为要保护的路由之一。登录完成后，Adal 将开始登录并加载此 protected 路由。当页面显示时，您可以调用webapi方法。您此处不需要 loginSuccess 事件。

您是否看到登录成功事件在您的设置中多次触发？