I have logout button in my angularjs(1.5) application. On click of it calling the login page url.After logout, when i click the browser back button again it is going to my application page instead of login page.
$scope.logOutUser = function () {
$window.location.href = "logoutURL";
}
Can anyone suggest how to implement this in angularjs?
Use $location service's .replace() method
$scope.logOutUser = function () {
$window.location.href = "logoutURL";
$location.replace()
}
Please take this my old post abut the back button issue : How to detect if a user clicks browser back button in Angularjs
You may may need that logic like
$scope.$on('$routeChangeStart', function (scope, next, current) {
if (next.$$route.controller != "Your dashboard Controller Name") {// please be mine dash board controller is your home page after login
// Show here for your model, and do what you need**
$window.location.href = "logoutURL";
}
});
But if you did logout in dashboard page then it would be an issue. At this time you need to maintain a flag with ng-Storage for the user is currently authenticate or not.
Related
Hie , I am using angularjs for building an end to end application.My functionality are following :
Default page is Login
After login get successful user is redirected to home page where he can search filter and can save his search.
I m facing problem with following use case: When user search some result and after that if he save some search history.If he press the browser back button the page must be redirect to again search result but page is redirected to login page always.
I want whenever user press back button of browser the page should be redirected to previous page not to login.
The complete home page is single page html and the functionality are managed by ng-if.
You have to use guards in application check weather user is logged in or not.
#Injectable()
export class AuthGuard implements CanActivate {
auth: any = {};
constructor(private authService: AuthService, private router: Router) {
}
canActivate() {
if (/*user is logged in*/) {
this.router.navigate(['/dashboard']);
return true;
}
else {
this.router.navigate(['/Login']);
}
return false;
}
}
Need your suggestions.
I have angularjs app, using ui.router for routing.
The users are first presented with a login screen, on login a grid is shown.
The grid is paginated.
Now if the user clicks on the browser back button, the user is taken to the login screen.
1. Is this correct behavior and would you suggest otherwise.
2. Also if the user as moved to 3 page using pagination should the back button take the user to the previous page.
Thanks in advance
1.) You could prevent the client to go back to login by using $stateChangeStart. For example like this:
/**
* Before state change / page switch
*/
$rootScope.$on("$stateChangeStart", function (event, next, current, fromState, fromParams, options) {
//verify login state
if ($cookies.get('loggedIn') !== undefined) {
if (next.templateUrl !== "views/login.html") {
$timeout (function () {
event.preventDefault();
$state.go('app.overview');
}, 50);
}
}
});
2.) Create an URL for all pages inside your pagination so the user is able to go back / forward by using the browser history:
.state('app.list', {
url: '/list/:pageId',
templateUrl: 'views/list.html'
})
Change the URL on page click without reload by using notify: false:
$state.go('app.list', {pageId: yourNextdPageId}, {notify: false})
I am using UI Router in my application, and I am wondering if I can reload - or destroy services when user is logging out, without refreshing the view? So far, when user is logging out, backend logs him out, and he is redirected to the login view. However, all of the services are still working. Any ideas?
Thanks
//Controller where the logout button is called
.controller("ctrl", function(destroyService){
this.logout = function(){
//Probably an ajax request to logout from server.
$http.post("logoutUrl", userId)
.then(function(){
destroyService.destroyAll();
$state.go("loginPage");
});
};
})
.service("destroyService", ["service1", "service2", function(service1, service2){
this.destroyAll = function(){
service1.destroyAll();
service2.destroyAll();
};
}]);
UI Router provides with state transition events, so you can listen for the transition event, and when the transition happens to the login page, you can manually refresh your services. By refresh I mean you can bring them to initial state by initializing them to initial state.
You can keep a function like close() in your service which declares everything again. So you can call this function on logout to refresh your service.
refer this for example: Refresh factory/service instance
I am using angularjs for my app. It contains a newsfeed. If user needs to view the particular news, he has to click on that particular news and it will redirect to that news. And after viewing the particular news, if user wants to go back to news feed(previous page), he has to click on the browser back button. So, in this case, if user clicks on the browser back button, the newsfeed page is reloading again. But, I dont want like this. I want to disable the reload and take the user to the place where he was before. I browsed a lot on this issue, but there was no absolute solution given. Please, help me out.
When you go back, previous route will be triggered and data will be reloaded. If you want to prevent reloading, place a service in between and cache the data.
$routeProvider.
when('/loadFeeds',{
controller:'LoadFeedCtrl',
templateUrl:'pages/feeds.html',
resolve:{
initData : function(FeedService){
return $q.all(
{
data: FeedService.load()
}
);
}
}
})
And in your FeedService, instead of making http call try to see the data is already available
.service('FeedService',function($q,$timeoute){
this.feeds=[];
this.load = function(){
var deferred = $q.defer();
$timeout(function(){
if(feeds.length===0){
this.feeds.push({title:'First','id':1})
this.feeds.push({title:'Second','id':2})
this.feeds.push({title:'Third','id':3})
this.feeds.push({title:'Fourth','id':4})
}
deferred.resolve(this.feeds);
},2000);
return deferred.promise;
};
})
The timeout service could be replaced with $http or $resource. I used the timeout to simulate the delay
you can take an anchor link and on click event of anchor call this
javascript function
window.window.history.back();
here is the html code for it
<input type="button" id="alnkBack" onclick="window.window.history.back();" value="Back" class="button" />
I have my app that you need to login to get in to the other pages.
so the first page is "login" and it checks if you are already logged, if so you will be redirected to the main page app, if not it will show you the login page.
now the problem is when the user is inside the logged page area, and he clicks back he will get to the "login" page and than redirected back to the main page, as he is logged in already.
So he is stuck in an infinite loop.
how can I remove the login page from the history.
just like in android "android remove activity from history stack"
here is the solution!
simply use:
$ionicHistory.nextViewOptions({
disableBack: true
});
example for login function:
$scope.login = function () {
Security.login($scope.cred.email, $scope.cred.password)
.success(function(data) {
Security.setUser(data.data[0]);
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('posts', {}, {location: "replace", reload: true});
}).error(function(data) {
$scope.showAlert();
});
};
For a pure AngularJS way to accomplish this (rather than ionic or javascript in the other answers), use the $location service's replace() method (documentation) :
Use $location.url('/newpath'); or $location.path('/newpath'); as you normally would to do the redirection in angular. And then just add $location.replace(); right after it. Or you can chain the commands like this:
$location.url('/newpath').replace();
Quick search: https://stackoverflow.com/a/8969975/185672
Top answer:
Instead of using window.location = url; to redirect,
try window.location.replace(url);.
after using replace() the current page will not be saved in session
history, meaning the user won't be able to use the Back button to
navigate to it.