Once i logged into application,if i click back button in browser it should not go back to login page again(Back button should be disable at that time).
$stateProvider(function('$stateProvider'){
$stateProvider
.state('login',{})
.state('app.home',{})
.state('app.contact',{});
});
From login page,im getting into app.home state,once i clicked back button it should not go for login page(Browser back button should be disable).
Thanks in advance.
I think that you have to deal with some basic routes and storage implementation.
Take this structure as an easy example of an authentication: we have the home URL, the default one, we have a login page and a secret page.
// Route configuration
var Config = function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url : '/',
templateUrl : 'home.html'
})
.state('login', {
url : '/login',
controller : 'LoginCtrl',
templateUrl : 'login.html'
})
.state('secret', {
url : '/secret',
templateUrl : 'secret.html',
authenticate : true
})
$urlRouterProvider.otherwise("/");
};
// Dependencie injection
Config.$inject = [
'$stateProvider',
'$urlRouterProvider'
];
// Module declaration
app.config(Config);
The secret page is available only for authenticated user, so you put a parameter in the state itself to indicate that this page needs some authentication.
To deal with the authentication process, like the redirect, you can create a run function which will have an event, listening to state changing.
If you will reach a page that needs authentication, you will check that and redirect the user to the login page.
If the user is already logged in and try to go manually to the login page, you will redirect him to the home page maybe with a feedback message.
// Initialize the application
var Init = function($rootScope, $state){
$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
var isLogged = localStorage.getItem('auth');
if(toState.authenticate && isLogged === null){
event.preventDefault();
// Set the url where you will redirect the user after the authentication
$rootScope.returnToState = toState.name;
// Redirect to the login page
$state.go('login');
}
if(isLogged && toState.name === 'login'){
event.preventDefault();
// Redirect to the homepage if the page is the login and
// you are already logged in
$state.go('home');
}
});
};
// Dependencie injection
Init.$inject = [
'$rootScope',
'$state'
];
// Module declaration
app.run(Init);
The login controller will be quite easy here, but you can do whatever you want to provide an authentication and save all parameters that you need
// Login Controller
var LoginCtrl = function($scope, $rootScope, $state){
// Share methods
$scope.authenticate = function(){
// Do whatever you want to validate credentials
localStorage.setItem('auth', true);
var redirectPath = angular.isUndefined($rootScope.returnToState) ? 'home' : $rootScope.returnToState;
$state.go(redirectPath);
};
};
// Dependencie injection
LoginCtrl.$inject = [
'$scope',
'$rootScope',
'$state'
];
// Module declaration
app.controller('LoginCtrl', LoginCtrl);
