身份验证期间刷新AngularJS SPA应用程序Azure AD

Question

We are trying to build an Angular SPA application that utilizes adal.js to authenticate with Azure AD. However unlike the sample application which contains a static route the does not require authentication we would like to determine if a user is authenticated and route the user accordingly based on 'userInfo.isAuthenticated', however when taking this approach by using an ng-if on the index page we are redirected to the login correctly, but after entering you login credentials we have what appears to be a loop that occurs one to three times while the application is in the process of logging in. does anyone have a solution using ADAL.js and ADAL-angular.js to intercept the 'IsAuthenticating' property at the scope level to avoid this issue?

Thank you,

Answer 1

Can you provide some example code? It is not clear to me about your scenario. Are you just trying to show/hide links on the page? Sample app uses ng-show using userInfo.isAuthenticated. Are you using ng-if on this page and not working? I expect them to work similar for ng-show and ng-if since it checks boolean value.

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li ng-class="{ active: isActive('/Home') }"><a href="#/Home">Home</a></li>
                    <li ng-class="{ active: isActive('/TodoList') }"><a href="#/TodoList">Todo List</a></li>
                    <li ng-class="{ active: isActive('/UserData') }"><a href="#/UserData" ng-show="userInfo.isAuthenticated">User</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="btn btn-link" ng-show="userInfo.isAuthenticated" ng-click="logout()">Logout</a></li>
                    <li><a class="btn btn-link" ng-hide=" userInfo.isAuthenticated" ng-click="login()">Login</a></li>
                </ul>
            </div>

Sample: https://github.com/AzureADSamples/SinglePageApp-AngularJS-DotNet/blob/master/TodoSPA/index.html