Question

我有一个带有ui.router的angularjs SPA。在我的模块配置中我有：

    $locationProvider.html5Mode(true).hashPrefix('!');
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('welcome', {
          url: '/',
          template: '<div><button type=\"button\" class=\"btn btn-primary\" ui-sref=\"login\"><i class=\"fa fa-sign-in\"></i>&nbsp;&nbsp;Login</button></div>',
      })
        .state('login', {
            url: '/login',
            template: '<h4> logging in ... </h4>',
            controller: 'LoginController',
            controllerAs: 'vm',
            requireADLogin: true
        })
        .state('loggedin', {
            url: '/loggedin',
            templateUrl: '/app/logged-in.html',
            requireADLogin: true
        })
        .state('logout', {
            url: '/logout',
            template: '<h4> logging out ... </h4>',
            controller: 'LogoutController'
        }) ;
   adalProvider.init(
   {
       instance: 'https://login.microsoftonline.com/',
       tenant: 'mytenant.onmicrosoft.com',
       clientId: 'myappid',           
       extraQueryParameter: 'nux=1',
       popUp: true,
       cacheLocation: 'localStorage' // enable this for IE, as sessionStorage does not work for localhost.
   },
   $httpProvider
   );

在LoginController中

：

function loginController($rootScope, $state, adalService) {
    /* jshint validthis:true */
    var vm = this;
    vm.title = 'login';
    vm.activate = activate;
    activate();
    function activate() {
        adalService.login();
    }
    $rootScope.$on('adal:loginSuccess', function (event, token) {
        console.log('loggedin');
        $state.go('loggedin');
    });
}

如果我删除了popUp设置，我就无法抓住adal：loginSuccess，所以我总是回到默认状态（欢迎屏幕）。

另外，我知道我可以设置redirectUri，但我不知道该怎么做。我尝试使用http://myappurl/loggedin尝试触发登录状态，但它无法正常工作。

由于

PS：欢迎状态的模板是内联的，因为原因不明，如果我使用templateUrl，则会引发错误（在引入adal之前，它工作正常）

Answer 1

我试图重现这个问题，但失败了。以下是适合您参考的脚本：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <base href="/">
    <title></title>
    <script src="node_modules\angular\angular.js"></script>

    <script src="node_modules\adal-angular\lib\adal-angular.js"></script>
    <script src="node_modules\adal-angular\lib\adal.js"></script>

     <script src="node_modules\angular-ui-router\release\angular-ui-router.js"></script>
    <script src="node_modules\angular-route\angular-route.js"></script>

</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="LoginController">
            <ul class="nav navbar-nav navbar-right">
                <li ng-show="userInfo.isAuthenticated"><a class="btn btn-link"  ng-click="logout()">Logout</a></li>
                <li ng-hide="userInfo.isAuthenticated" ><a class="btn btn-link" ng-click="login()">Login</a></li>
                <a ui-sref="home">Home</a> | <a ui-sref="about">About</a>
                <div ui-view></div>
            </ul>
        </div>
    </div>

    <script>
    var myApp = angular.module('myApp', ['AdalAngular', 'ui.router', 'ngRoute'])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', '$stateProvider', '$routeProvider','$locationProvider','$urlRouterProvider', function ($httpProvider, adalProvider, $stateProvider, $routeProvider,$locationProvider,$urlRouterProvider) {

 $locationProvider.html5Mode(true,false).hashPrefix('!');

 $stateProvider.state("home",{
       template: "<h1>HELLO!</h1>"
 }).state("about",{
          templateUrl: '/app/about.html',
         requireADLogin: true
 })

    adalProvider.init(
       {
           instance: 'https://login.microsoftonline.com/',
           tenant: '',
           clientId: '',           
           extraQueryParameter: 'nux=1',
           popUp:true
       },
       $httpProvider
       );
}])
    myApp.controller('LoginController', ['$rootScope','$scope', '$http', 'adalAuthenticationService', '$location','$stateParams','$state',  
                            function ($rootScope,$scope, $http, adalService, $location,  $stateParams,$state) {

                                    $scope.login = function () {
                                        adalService.login();
                                    };
                                    $scope.logout = function () {
                                        adalService.logOut();
                                    };

                                    $rootScope.$on('adal:loginSuccess', function (event, token) {
                                    console.log('loggedin');
                                    $state.go('about');
                                });
    }]);

    </script>
</body>
</html>

我使用了最新版本的adal-angular库（v1.0.14）。使用弹出页面登录后，此代码示例将转到 about 状态。如果代码有效，请告诉我。如果你还有问题，你介意与我们分享一个可以运行的演示吗？

无法抓住adal：loginSuccess不使用弹出窗口

1 个答案: