I'm using adal.js with ui-router and believe I have everything configured correctly. Unfortunately, when adding requireADLogin to my states, nothing happens and I get the error Failed to load template: ./dashboard.html (HTTP status: undefined undefined)
Auth module
angular
.module('components.auth',
[
'ui.router',
'AdalAngular'
])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function($httpProvider, adalProvider) {
adalProvider.init({
instance: 'https://login.microsoftonline.com/',
...
// these are components that can be loaded such as nav without needing authentication
anonymousEndpoints: ['./root.html', './app.html', './app-nav.html', './app-sidebar.html']
},
$httpProvider);
}]);
Dashboard module
var dashboard = {
bindings: {
//
},
templateUrl: './dashboard.html',
controller: 'DashboardController'
};
angular
.module('components.dashboard')
.component('dashboard', dashboard)
.config(['$stateProvider', 'adalAuthenticationServiceProvider', function ($stateProvider, adalProvider) {
$stateProvider
.state('dashboard', {
parent: 'app',
url: '/dashboard',
component: 'dashboard',
requireADLogin: true,
resolve: {
}
});
}]);
According to chrome debug tools, the application never even attempts to be redirected to an auth portal:
Related
When I follow the direct link /blog/3 on localhost everything works fine.
After publishing to webserver the page constantly reloads and I get 'warning: tried to load angular more than once' in Chrome console.
var app = angular.module("myApp",
[
'ngAnimate',
'ngRoute',
'LocalStorageModule',
'slickCarousel',
'noindex-svg',
'svg-use'
// 'ui.router'
]
);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/", {
controller: "mainController",
templateUrl: "/app/views/dashboard/main.html"
});
$routeProvider.when("/blog/:name", {
controller: "blogController",
templateUrl: "/app/views/blog/blog-details.html"
});
$routeProvider.when("/blog", {
controller: "blogController",
templateUrl: "/app/views/blog/blog-list.html"
});
if (window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
});
I am using asp.net web api 2 and Azure app.
Why does it happen only on the webserver?
I'm trying to use $cookies in route js page, is there anyway to use this in route? I have $cookies.get('token') in route js page but got error. I have put $cookies inside function. Is there anything I missing, or is $cookies can't use in route js?
codes:
/* VIEW LOADS HERE */
MainCtrl.config([ '$stateProvider','$urlRouterProvider','$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider, $cookies){
// Redirect any unmatched URL
$urlRouterProvider.otherwise('/');
// $cookies.get('token');
if(1==1){
// Checkout : Sign In
$stateProvider
.state('checkout-signin', {
url: '/checkout/signin',
templateUrl: 'app/views/checkout.signin.html',
controller: 'CartFormController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MainCtrl',
files: [
'app/controllers/cart-form.controller.js'
]
});
}]
}
})
}
}]);
thanks!
I'm trying to implement Login feature and there is an redirect after success/failure using Express Router:
router.post('/login',
passport.authenticate('local', {successRedirect:'/dashboard', failureRedirect:'/login',failureFlash: true}),
function(req, res) {
res.redirect('/');
});
and after successfull login, I got Cannot GET /dashboard or in case of failure Cannot GET /login.
Is there some incompability between routing on the server (Express) and on the client side (Angular UI Router)? Should I use just one of the router and which one?
Here is the the code for UI Router:
angular
.module('app', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngResource',
'ngTouch'
])
.config( function ($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('home', {
url: '',
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.state('home.dashboard', {
abstract: true,
url: '/dashboard',
templateUrl: 'views/dashboard.html'
});
// For any unmatched url, send to /
$urlRouterProvider.otherwise('/');
$mdGestureProvider.skipClickHijack();
//remove the hashtag from URL
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
Your express router is fine. and it was a norm form submit, the page will properly redirect.
But as requests are made through ajax from Angular App, those redirects are not known to the app and hence doesn't do anything.
Make your dashboard or login controller evaluate the login status and then redirect from there.
The current code you wrote is not redirecting to the front end, its generating a new GET request, you need to handle the GET requests generated.
in your case
router.get('/dashboard',function(req,res){
res.redirect("full path of the url which you use in browser")
});
or try this
{successRedirect:'http://your front end domain/dashboard', failureRedirect:'http://your front end domain/login',failureFlash: true}
I am building an angular app with several modules close to john papas styleguide. Following that, I have several independent modules with their own route definitions and others with interceptors. My Problem is: when I run it on Cordova / Android, state definitions only seem to work, when I put them in the main module. In my Browser the work. Did anybody come over this issue yet?
E.g. this works on both local browser and on device with cordova:
//main.js
'use strict';
angular.module('main', [
'app.core',
'auth'
])
.config(function ($stateProvider, $urlRouterProvider) {
// ROUTING with ui.router
$urlRouterProvider.otherwise('/main/list');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'main/templates/menu.html',
controller: 'MenuCtrl as menu'
})
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
/* more states here */
This only works in local browser (main module same as above):
//auth.routes.js
'use strict';
angular
.module('auth.routes')
.config(config);
function config ($stateProvider) {
$stateProvider
.state('main.login', {
url: '/login',
views: {
'pageContent': {
templateUrl: 'auth/templates/auth.login.html',
controller: 'LoginCtrl'
}
}
})
}
//auth.module.js
'use strict';
angular.module('auth', [
'app.core',
'auth.constants',
'auth.routes',
'auth.controllers',
'auth.services',
'auth.interceptors',
'auth.config'
]);
angular.module('auth.constants', []);
angular.module('auth.routes', []);
angular.module('auth.controllers', []);
angular.module('auth.services', []);
angular.module('auth.interceptors', []);
angular.module('auth.config', []);
Error says that the state was not found on navigation.
Try
angular
.module('test', [])
.config(config);
config.$inject = ['$routeProvider'];
function config($routeProvider) {
$routeProvider
.when('/login', {
title: 'Calculators',
templateUrl: 'modules/views/login.html',
controller: ''
});
}
remove state provider ,check for simple routing it will work.
My state configuration goes something like this:
.config(function ($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.facebook({
clientId: '16250xxxxxx',
scope: 'user_friends'
});
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('core', {
abstract: true,
template: '<ui-view>',
resolve: {
'authStatus' : function($auth, $q, User) {
var defer = $q.defer();
$auth.authenticate('facebook').then(function(result) {
User.update(result.data.user);
defer.resolve();
});
return defer.promise;
}
}
})
.state('home', {
parent: 'core',
url: '/home',
templateUrl: 'app/home/home.html'
})
....
.... other states
When my application loads, it enters the resolve block of 'core' state twice.
This causes the facebook authentication window to open twice..
Any clue why it would execute the core state twice ?
Found the reason for this occurence.
The satellizer $auth service would redirect to a default url upon resolving the authentication.
I simply had to reset that to '/home' in the config section of angular app
$authProvider.loginRedirect = '/home';