Is there a way to remove a particular fragment from the backbone history? Here is a use case:
I have a login view, and once the user successfully logs in, there is no need for that view to remain in the history because it is meaningless to go back to the login page after successful login. However, I still need the login view in the history if the user navigates to the login page first, does not login but navigates away from the login page to another page (say password reset page). If the user accidentally clicked on the password reset link and navigated there, clicking on the back button should bring the user back to the login page.
Any chance of doing this with backbone?
Answering your question: Yes, there is a way to handle this, you just have to implement it in the required routers you have set up in your app.
For example, if you want to:
Start history on first page after login
Start history on password reset page (or any other gated page)
Do the following (this code snippet should be placed in your routers, in the initialize function):
initialize: function(options) {
this.route("pageId", "login", function(number){
//Call to Backbone.history.start() wether or not you want the history to start on this page
//E.g. don't call it on the index route, just in /reset-password and so on.
});
},
Try this: on sign-in action use this to redirect:
Backbone.history.navigate('/destination/page', {replace: true, trigger: true});
Related
I am using the Security component by Okta ("okta-react" package) and the SecureRoute from the same package,
I am using the onAuthRequired field to go to a specific landing page, let's call it LandingPage, so everyone has access to that page, whether they logged in or not.
In LandingPage page there's a 'Start!' button that I want that will be used to go the next page if the user is logged in, or to the Login page if the user isn't logged on.
Since the Security component has the onAuthRequired it will always send me to the same LandingPage component, but if I am there, I want it to check if I am in that LandingPage - and I am not logged in - it will send me to the Login page.
and if I am there, and I am logged in - it will send me to the next page,
is it possible?
I have an onboarding page like this www.abc.com/ welcome. On continuing users land on /set-profile image page.
There is a Submit on this page.
When users click on Submit button, if the user has come from /welcome, I want users to go to the configuration page, else I want users to go to /home.
The issue I am facing is, I tried both window.location and use history but I can't figure out how to find the "from" location.
What I am doing wrong?
You can't access the browser history from JS (that would be a security issue).
What you can do is add a query string to your /set-profile route (such as ?returnTo=/welcome) and use it for the redirection.
I have logout button on my site, When clicked their authentication is removed and they are sent back to the home page.
I was using
browserHistory.push({ pathname: '/home' });
but I noticed that if I would hit the "back" button after being logged out they would sort of go back to the previous logged in page(they would see nothing as they have no authentication).
I would like to remove the history so they can't go back.
So I tried
browserHistory.replace({ pathname: '/home' });
this also did not work.
As far as I know, it's not possible.
I'd recommend you to check user auth on pages that require users to be authenticated and redirect them to the login page using browserHistory.replace. So if the user clicks back after logout the will see login page again.
Hi It's great to see your progress while implementing optimized authentication in your app. You need to make sure that your history stack is maintained properly. I think you have always used history.push even going back. This is going to make a trouble. Try to use goBack(), go(n) for programmatically and for browser back button use replace, push where needed. You history stack should be aligned with browser back button.
There are 2 web applications, ours and the other team. The other team's web app is http://otherteam.com and our application is http://myteam.com
On http://otherteam.com webpage, they have an href link pointing to our page which is http://myteam.com/config?lang=en. When our web application(actually Marionette AppRouter's task) receives that kind of route or path, it will parse it and set the language configuration and then we have a code to redirect the user to the final webpage which is http://myteam.com/landingpage
The code that we are using is
Backbone.history.navigate('landingpage', {replace: true});
to redirect the user to the final destination.
Unfortunately, when user clicks Back button of the browser, it doesn't go back to http://otherteam.com. It will go back to http://myteam.com/config?lang=en which is still our own application. What happens is that the Marionette app router will parse it again similar to how I described it above. The user will just be brought back to http://myteam.com/landingpage
So I changed
// Backbone.history.navigate('landingpage', {replace: true})
and now I'm using
history.replaceState({}, '', 'landingpage');
When I click Back button, the url on the top bar beocmes http://myteam.com/config?lang=en, but it doesn't reload our landingpage anymore which is good. However, nothing happens to the page until I click Back button again. After making the second click on the Back button, I'm back to http://otherteam.com which is great but I had to click the Back button twice.
The problem is you are redirecting the user from the /config?lang=en to another page, so when you click back, they land on the previous page and are then redirected back to the landing page again.
The simplest solution here would be for otherteam.com to link to your landing page and pass the params to be consumed there - http://myteam.com/landingpage?lang=en. Redirecting the user multiple time is never a good idea, and almost always unnecessary.
Once you have received the lang config param, it could be an idea to save it to local storage so it can be retrieved wherever it is needed throughout your app.
I'm facing a problem don't know how to solve. I would like to get some light here.
Given an AngularJS application that routes using the standard $routerProvider, and considering the fact that whenever an end user tries to access a private area he gets redirected to the register area, happens the following:
User just landed onto de application (didn't get logged in).
User goes to /profile
The application checks whether there is session info in the client or not.
The application redirects to /profile/register
User clicks on "Back" button of the browser and goes to /profile.
(Next step is number 3 again and again).
This happens because each time the application redirects using the $routerProvider, it pushes all routes in the browser history.
My question is, how can I jump the failed /profile access over the browser history? How can I tell the browser do not save this route under given conditions
like the user is logged in?
FAQ regarding history: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
Supposing you're using the $location built-in service to redirect, you can use $location.replace() to replace the current history entry:
if (notLoggedIn) {
$location.url( "/profile/register" );
$location.replace();
}
Note that this will apply to current digest only, as noted in the API docs.