We have an AngularJS SPA, and we have been using Adal.js for authentication. Till now we were handling the routes using $routeProvider (ngRoute module), but due to some recent requirement, we need to move away from the route provider method and adopt $stateProvider (in ui-router). However out authentication mechanism needs to remain similar. Can adal.js work with $stateProvider in the similar fashion as it works with $routeProvider?
We are using requiredADLogin paramter in the routes to specify which routes need Azure AD Authentication. The code looks like below:
app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function ($routeProvider, $httpProvider, adalProvider) {
$routeProvider
.when('/', {
controller: 'homeCtrl',
templateUrl: '/Templates/home.html',
requireADLogin: true
})
.otherwise({
//template: "Invalid"
redirectTo: '/'
});
On changing to $stateProvider will a code like below be valid:
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
})
});
Or if we can put the requireADLogin property in the parent state.
adal.js will work with ui-router, requireADLogin should be at every state you want to protect not just in the parent state.