将 Adal.js 与 $stateProvider 一起使用

Question

我们有一个 AngularJS SPA，我们一直在使用 Adal.js 进行身份验证。到目前为止，我们一直在使用 $routeProvider（ngRoute 模块）处理路由，但由于最近的一些需求uirement，我们需要放弃路由提供者方法并采用 $stateProvider（在 ui-路由器）。然而，身份验证机制需要保持相似。 adal.js 能否以与 $routeProvider 类似的方式使用 $stateProvider？
我们在路由中使用 requiredADLogin 参数来指定哪些路由需要 Azure AD 身份验证。代码如下所示：

app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) {

$routeProvider
    .when('/', {
        controller: 'homeCtrl',
        templateUrl: '/Templates/home.html',
        requireADLogin: true
    })
    .otherwise({
        //template: "Invalid"
        redirectTo: '/'
    });

更改为 $stateProvider 后，如下代码将有效：

app.config(function($stateProvider, $urlRouterProvider) {
           $stateProvider
        .state("dashboard", { url: "/dashboard", templateUrl: "Templates/dashboard.html" })
            .state("health", { 
                parent: "dashboard", 
                url: "/agent_tier1", 
                templateUrl: "Templates/health.html",
                requireADLogin: true 
        })
});

或者如果我们可以将 requireADLogin 属性放入父状态。

Answer 1

adal.js 将与 ui-router 一起工作，requireADLogin 应该处于您想要保护的每个状态，而不仅仅是在父状态。

Answer 2

如果您使用的是组件路由器，ADAL 将无法工作：

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

警告任何试图将低级别 angular 2.0 应用程序升级到打字稿的人，ADAL 将是一个挑战。

将 Adal.js 与 $stateProvider 一起使用

Using Adal.js with $stateProvider

angularjs

angular-ui-router

adal

angularjs-ng-route

adal.js