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
Related
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.
I have got a problem in an angular app, where I have integrated ng-admin to provide a simple admin panel. I have also integrated Authentication and want to point to a login state, when there is no current session.
Ng-admin itself sets ui-router's otherwise method to point directly to the dashboard.
Even when setting my own $urlRouterProvider.otherwise(...) I am not able to force ui-router to use my otherwise function.
I tried it like this:
$urlRouterProvider.otherwise(function ($injector) {
console.log('Hello World?!');
state.go('login');
});
But the console.log is never printed...
I would like to intercept the state transition to the dashboard, before any dashboard-code is run, and redirect the user to the login page first.
Any hints and ideas are greatly appreciated.
Thanks #user8175473 for pointing me into the right direction.
I have solved the problem using $on('$stateChangeStart) as $on('$stateChangeSuccess) is called after some state code is executed.
$rootScope.$on('$stateChangeStart', function(event, toState) {
if(toState.name !== 'login' && !service.isLoggedIn()) {
event.preventDefault();
$state.go('login');
}
});
Note that event.preventDefault() is needed to cancel the state transition completely.
I'm writing an EShop project, and i show some products in it which customers can buy them, when the customer click on buy button, i checked whether customer was logged in or not, if not i should route the customer to specific controller for log in process, if customer was logged in i route him or her to another controller, how can i do it?
<script>
app.controller('buyTheItem',function($scope,$http){
//when customer click on buy button then:
$scope.buy = function(){
// here i check whether customer was logged in or not
if(was logged in){
// i should route to buyProductController
}
else{
// i should route to accountController for log in
}
};
});
</script>
before i use window.location but its not right way because i need angular routing, and it's not use this,, any one can tell how can i do it?
For this, I can suggest to you to use UiRouter: https://github.com/angular-ui/ui-router
When you implement uiRouter you can afterwards use service $state
and your code can look like:
if (was logged in) {
$state.go('my state for buyProductController');
} else {
$state.go('my state for accountController');
}
uiRouter has a lot of other advantages, all you can see here: https://github.com/angular-ui/ui-router/wiki
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.