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.
Related
I am creating a react/Gatsby website and am trying to get the navigation working an need some guidance
So basically I have a site on a domain like: https//mysite.com
When navigating in the site my route gets added to the domain, like so: https//mysite.com/page1,
https//mysite.com/page2 etc.
When I refresh the browser I want the site to reload the website to its origional state, ie, https//mysite.com.
When I do reload from /page2, for example, the site seems to remember the last position. So on a reload I still have https//mysite.com/page2 in the address bar, whereas I want the site to go to the home page.
Is this possible?
Thanks
See this question for how to detect a page reload (such as pressing F5). The second most upvoted answer recommends this code for detecting the refresh and triggering another function:
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
}
Gatsby uses #reach/router under the hood. So use Gatsby Link to redirect to your root page:
import { navigate } from "gatsby"
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
navigate("/"); // redirect to your root page here
}
The user will be able to go back to the previous page. If you don't want this you replace the history like this:
navigate("/", { replace: true });
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.
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 trying to remember the scroll position of a page using that code:
$rootScope.$on('$locationChangeStart', function(angularEvent, nextRoute, currentRoute) {
$rootScope.scrollPosCache['dailyController'] = $window.pageYOffset;
});
When the page infinitely-scrolls I am using ui-router's transitionTo to modify the current url in the browser history like that:
$state.transitionTo('daily', { page: pageIndex }, { notify: false, location: 'replace' });
the transition changes the search string to e.g.: http://example.com/?page=1/2/3/4/etc
so, the $locationChangeStart code is running both when I make the transition and when the user leaves the list page to follow a link to a detail page.
How do I know the location change has come from a transition and not from a click through? (I only want to remember the scroll position when the page is left)
The solution is to use $stateChangeStart and not $locationChangeStart.
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" />