adalProvider.init(..) 破坏路由

Question

所以根据this tutorial and working example，我之前在我的 app.js 文件中调用了这个函数（其中路由工作得非常好）：

app
    .config([
            '$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider',
            function($routeProvider, $httpProvider, adalProvider) {
                $routeProvider
                    .when('/home',
                        {
                            templateUrl: '/app/views/home.html',
                            caseInsensitiveMatch: true
                        })
                    .when('/passwordReset',
                        {
                            templateUrl: '/app/views/passwordReset.html',
                            controller: 'ResetRequestController as vm',
                            requireAdLogin: true,
                            caseInsensitiveMatch: true
                        })
                    .when('/userSearch',
                        {
                            templateUrl: '/app/views/userSearch.html',
                            controller: 'UserSearchController as vm',
                            requireAdLogin: true,
                            caseInsensitiveMatch: true
                        })
                    .otherwise({ redirectTo: '/home' });

            }
        ]
    );

...但是通过添加以下代码作为教程请求并添加这一行（直接在.otherwise({ redirectTo: '/home' });之后：

adalProvider.init(
    {
        instance: 'https://login.microsoftonline.com/',
        tenant: '...', //Removed
        clientId: '...', //Removed
        extraQueryParameter: 'nux=1',
        //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
    },
    $httpProvider
);

...我收到以下错误：

angular.js:13424 错误：[$compile:tpload] 无法加载模板： app/views/_header.html（HTTP 状态：未定义未定义） http://errors.angularjs.org/1.5.3/$compile/tpload?p0=app%2Fviews%2F_header.html&p1=undefined&p2=undefined 在 angular.js:68 ...[为便于阅读而被用户截断]

angular.js:13424 TypeError: Cannot read property 'push' of undefined 在 routeChangeHandler (adal-angular.js:213) ...[为便于阅读而被用户截断]

angular.js:13424 错误：[$compile:tpload] 无法加载模板： /app/views/home.html（HTTP 状态：未定义未定义） http://errors.angularjs.org/1.5.3/$compile/tpload?p0=%2Fapp%2Fviews%2Fhome.html&p1=undefined&p2=undefined 在 angular.js:68 ...[为便于阅读而被用户截断]

多个 StackOverflow 问题已经解决了错误消息 #1 和 #3，但它们建议确认路由是否正确。我不仅确认文件在那里（通过直接将浏览器指向它们），而且如前所述，根本没有adalProvider.init(..) 路由恢复正常。

我正在运行 npm 包版本 1.0.10 中包含的最新版本的 adal.js 和 adal-angular.js。

我在这里缺少什么？在实施adalProvider.init(..) 的同时，我可以更正什么以将路由恢复到工作状态？

Answer 1

Angular / Adal.js 也有类似的问题。我正在使用 ui-router 而不是 ng-route，尝试切换到 ng-route 以查看这是否可以解决问题（认为它与解析模板 URI 有关），但问题仍然存在。我认为我的解决方案也适用于您，因为它似乎与路由无关，而是与 adal 配置有关。

使用匿名端点更新了我的配置，未通过身份验证屏蔽的部分：

    var anonymousEndpoints = [
      'partials/public/'
    ];

    var endpoints = {
      // Map the location of a request to an API to a the identifier of the associated resource
      'https://contosotogo.azurewebsites.net/': 'https://contoso.onmicrosoft.com/ToGoAPI'
    };

 adalAuthenticationServiceProvider.init(
   {
     tenant: '__removed__',
     clientId: '__removed__',
     anonymousEndpoints: anonymousEndpoints, // Added this
     endpoints: endpoints
   },
   $httpProvider
 );

我认为模板通过未知的键/状态存储在 Angulars 模板缓存中，并且在未经身份验证的情况下无法检索。由于它们不需要身份验证，因此我将它们拉出。这似乎也解决了更新过期令牌时的无限循环问题（https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/216）。

老实说，我在实施 adal.js 时遇到了很多问题。让东西工作一直在努力搜索 stackoverflow/github 和奇怪的教程/示例......

希望对你有帮助，干杯