This my main module definition:
$rootScope.$on('unauthorized', function () {
$state.go('login');
});
.config(
function ($stateProvider, $logProvider, $httpProvider) {
$logProvider.debugEnabled(true);
// main application area //
$stateProvider
.state('body', {
url: '/',
template: '<div ui-view />'
});
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController',
});
$httpProvider.interceptors.push('APIInterceptor');
});
Interceptor definition:
service('APIInterceptor', function($rootScope) {
// Just for testing
$rootScope.$broadcast('unauthorized');
}
It's not following this:
$state.go('login'); and seems like it's looping until Chrome fails the page. Without $state.go('login'); code runs ok but I need to open the login page on unauthorized. My question is how do I navigate to login state?
Thanks
Try this
$rootScope.$on('unauthorized', function ($state) {
$state.go('login');
});
Related
I have a application with main pages as app.html and my controller is app.js. The following is the code in app.js:
angular.module(constants.MODULE_NAME).controller('AppCtrl', function ($scope, $state, $log, $http) {
$scope.role = '';
$http.get("htttp://localhost:8082/service/getUserRole")
.then(function (response) {
$scope.role = response.data.context;
debugger;
if ($scope.role.toLowerCase() == "hr") {
//direct view to hr dashboard
$state.go("app.hr");
} else if($scope.context.toLowerCase() == "eemployee"){
//direct view to employee dashboard
$state.go("app.employee");
}
else{
//do nothing
$state.go("app");
}});
});
So when I run this website the controller is called and based on the value of role the respective dashboard is displayed.When the website runs it hits http://localhost:9080/#/ which is calling the above controller and redirects too http://localhost:9080/#/hr/dashboard (or) http://localhost:9080/#/employee/dashboard.
I have the following in my router.js
export default ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
$stateProvider
.state('app', {
url: '/',
template: require('./app.html'),
controller: 'AppCtrl',
controllerAs: 'app'
})
.state('app.hr', {
url: 'hr/dashboard',
template: require('./hr/dashboard/index.html'),
controller: 'HRCtrl',
controllerAs: 'hrctrl'
})
.state('app.employee', {
url: 'employee/dashboard',
template: require('./employee/dashboard/index.html'),
controller: 'EMPCtrl',
controllerAs: 'empctrl'
});
$urlRouterProvider.otherwise('/');
}];
Now when I change the URL to http://localhost:9080/#/ and hit enter then the controller is not getting called. But when I do a refresh the controller gets called. Can I know how I can fix this issue.
Take the following code. I have a cookie that is created once a user successfully logs in. My API is also already authenticated. What I am looking to do is do a simple check of the cookie before serving up a route, with the only exception of the login route.
angular
.module('pizzaGiants.routes', ['ui.router'])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
// Application Routes
// -----------------------------------
// add check if cookie exists else redirect to login
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'features/login/login.html',
controller: 'loginCtrl'
})
.state('attributes', {
url: '/attributes',
templateUrl: 'features/attributes/attributes.html',
controller: 'attributesCtrl'
})
.state('users', {
url: '/users',
templateUrl: 'features/users/users.html',
controller: 'usersCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'features/signup/signup.html',
controller: 'signupCtrl'
})
.state('roles', {
url: '/roles',
templateUrl: 'features/roles/roles.html',
controller: 'rolesCtrl'
})
.state("fruits", {url: "/fruits",templateUrl: "features/fruits/fruit.html",controller: "fruitCtrl"}).state("colors", {url: "/colors",templateUrl: "features/colors/color.html",controller: "colorCtrl"}).state("contacts", {url: "/contacts",templateUrl: "features/contacts/contact.html",controller: "contactCtrl"})
}]);
Could be like following
app.run([
'$rootScope','$location', '$timeout',
function ($rootScope, $location, $timeout) {
$rootScope.$on('$stateChangeStart', function () {
if (// your condition logic) {
$timeout(function () {
$location.path("/login");
}, 1);
}
});
}
]);
I'm trying to redirect after login to a specific page in Meteor using AngularJS. But somehow it is not working. After login Meteor.user() is returning null. Because of this every time it is routing to messages page only. I have seen this example from one of the forums and developed on top of that.
angular.module("jaarvis").run(["$rootScope", "$state", "$meteor", function($rootScope, $state, $meteor) {
$meteor.autorun($rootScope, function(){
if (! Meteor.user()) {
console.log('user');
if (Meteor.loggingIn()) {
console.log('loggingIn ' + Meteor.user()); -- returning null
if(Meteor.user()) {
$state.go('onlineusers');
} else {
//On login
$state.go("messages");
}
}
else{
console.log('login');
$state.go('login');
}
}
});
}]);
Routes declared as below.
angular.module('jaarvis').config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.ng.html',
controller: 'LoginCtrl'
})
.state('onlineusers',{
url: '/onlineusers',
templateUrl: 'client/onlineusers/onlineusers.ng.html',
controller: 'OnlineUsersCtrl'
})
.state('messages', {
url: '/messages',
templateUrl: 'client/chats.ng.html',
controller: 'ChatCtrl'
})
});
$urlRouterProvider.otherwise("/messages");
}]);
Logging using below snippet of code.
<meteor-include src="loginButtons"></meteor-include>
Michael is probably right about the root cause of the problem, but I think that a better alternative is provided by the the authentication methods of Angular-Meteor.
What you are going to want to do is to force the resolution of a promise on the route. From the Angular-Meteor docs (i.e. a general example...):
// In route config ('ui-router' in the example, but works with 'ngRoute' the same way)
$stateProvider
.state('home', {
url: '/',
templateUrl: 'client/views/home.ng.html',
controller: 'HomeController'
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
});
Your specific code would look something like:
angular.module('jaarvis').config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider){
$locationProvider.html5Mode(true);
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.ng.html',
controller: 'LoginCtrl'
})
.state('onlineusers',{
url: '/onlineusers',
templateUrl: 'client/onlineusers/onlineusers.ng.html',
controller: 'OnlineUsersCtrl',
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
})
.state('messages', {
url: '/messages',
templateUrl: 'client/chats.ng.html',
controller: 'ChatCtrl',
resolve: {
"currentUser": ["$meteor", function($meteor){
return $meteor.waitForUser();
}]
}
})
});
$urlRouterProvider.otherwise("/messages");
}]);
And then on your ChatCtrl and OnlineUsersCtrl controllers, you would add currentUser as one of the variables to inject, like:
angular.module("rootModule").controller("ChatCtrl", ["$scope", "$meteor", ...,
function($scope, $meteor, ..., "currentUser"){
console.log(currentUser) // SHOULD PRINT WHAT YOU WANT
}
]);
You might also want to consider the $meteor.requireUser() promise as well, and then send the user back to the login page if the promise gets rejected. All of this is documented very well on the angular-meteor website.
Good luck!
It could be that the user object hasn't loaded yet. You can try:
if ( Meteor.userId() ) ...
instead
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';
This one is baffling; I'm trying to use the simple $state.go() function in my app which uses ui-router, but I get this:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MainApp due to:
Error: [$injector:modulerr] Failed to instantiate module GroupApp due to:
Error: [$injector:unpr] Unknown provider: $state
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24state
at REGEX_STRING_REGEXP
Here is the code I am using:
var app = angular.module('GroupApp', ['ui.router']);
groupjs_config.$inject = ['$stateProvider', '$state', '$urlRouterProvider'];
app.config(groupjs_config);
groupjs_controller.$inject = ['$scope'];
app.controller('groupjs.ctrl', groupjs_controller);
//----------------------------------------------------
// FUNCTIONS
//----------------------------------------------------
function groupjs_config($stateProvider, $state, $urlRouterProvider){
// For any unmatched url, redirect to /state1
$stateProvider
.state('group', {
abstract: true,
url: "/group/:groupid",
onEnter: function(){
if (true){ //logged in
$state.go('group.home');
}
else {
$state.go('group.noaccess');
}
}
})
.state('group.home', {
url: "/group/:groupid",
templateUrl: "groups/group/group.html"
})
.state('group.noaccess', {
url: "/group/:groupid",
templateUrl: "groups/group/group_noaccess.html"
});
}
function groupjs_controller($scope){
$scope.hi = "hi";
$.material.checkbox('mycheckbox');
$scope.groups = [
];
}
Try injecting the $state to the onEnter method :
onEnter: ['$state',function($state){
if (true){ //logged in
$state.go('group.home');
}
else {
$state.go('group.noaccess');
}
}]
and take it out from the config:
groupjs_config.$inject = ['$stateProvider', '$urlRouterProvider'];
...
function groupjs_config($stateProvider, $urlRouterProvider){
Only providers and constants can be injected into config blocks see the table at the bottom of https://docs.angularjs.org/guide/providers
The $state can be injected into the controller, or any filter, factory, service, run block etc. but just not in config. In order for anything but a provider to be created it must first have been configured (this is what the config blocks are for, configuring providers of services/factories/values).
First change this line:
groupjs_config.$inject = ['$stateProvider', '$state', '$urlRouterProvider'];
to:
groupjs_config.$inject = ['$stateProvider', '$urlRouterProvider'];
Change your routing function like this:
function groupjs_config($stateProvider, $urlRouterProvider){
// For any unmatched url, redirect to /state1
$stateProvider
.state('group', {
abstract: true,
url: "/group/:groupid",
onEnter: ['$state',function($state){
if (true){ //logged in
$state.go('group.home');
}
else {
$state.go('group.noaccess');
}
}]
})
.state('group.home', {
url: "/group/:groupid",
templateUrl: "groups/group/group.html"
})
.state('group.noaccess', {
url: "/group/:groupid",
templateUrl: "groups/group/group_noaccess.html"
});
}
ui-router
$stateProvider
.state('admin', {
abstract: true,
url: '/admin',
template: '<div ui-view></div>'
})
.state('admin.index', {
url: '/index',
template: '<h3>Admin index</h3>'
})
.state('admin.users', {
url: '/users',
template: '<ul>...</ul>'
});
onEnter, onExit
Our app calls these callbacks when we transition into or out of a view. For both options, we can set a function we want called; these functions have access to the resolved data.
These callbacks give us the ability to trigger an action on a new view or before we head out to another state. It’s a good way to launch an “Are you sure?” modal view or request the user log in before they head into this state.