i am using jqueryMobile with backbonejs.
task: login form with email and password fields. Fill the form and redirect to same form with 3 links:
update profile
change pwd
logout
Problem: when logout is clicked i wish to redirect it back to the login form(same page) with message-"successfully logged out."
what i did:
in view.js:
$('#logoutClick').click(function() {
console.log("hi");
this.collection = new Fan();
this.collection.logoutFan();
window.location.reload(true);
});
in myController(of cakephp):
public function mobile_logout() {
$status = true;
$event = array();
$data = array();
$this->Auth->logout();
$this->Session->setFlash('Successfully Logged out', 'flash_failure');
$this->Session->delete('Auth.Fan');
$this->set('status',$status);
$this->set('output',$data);
$this->render('/Layouts/json/mobile',false);
}
now when i click on logout, the page is redirected but the message is not rendered.(i guess the page reloads before fetching the response).
When i inspect element in chrome-I can see logout.json with no available preview(json response from controller isn't there).
How do i solve this?
Don't do reload. Use redirect:
window.location = 'yourloginpage?msg=success';
As jQuery mobile simulates one big web page, you cannot reffer to another pages. Using:
window.location.reload(true);
Opens a new view, where jQM starts working once again (it downloads all header files etc). It works like links with rel="external"
If you want to keep jQM working in such case you have to add all headers to your html files and you should be aware you cannot reffer to previous page because it is deleted from DOM.
I did it some different way. It is not perfect:) Try to redirect to another page using $.mobile.changePage("./newpage.html). In this new page add event pageinit and redirect back to the start page.
Related
window.onload = function () {
alert("previous url is: "+document.referrer);
}
my output ===> previous url is: https://develorercom.visualforce.com/apex/dVFpage?
fbclid=IwAR0DMWaBqOwsMur2wHsi4nyAtvD1z1689XqyZhCujdABjjZEu
Here i click my link from Facebook getting fbcid(Facebook click ID) How to get my previous URl or Domine Name
I've seen this solution:
firebase.auth().onAuthStateChanged(user => {
user ? history.push("/dashboard") : history.push("/login");
renderApp();
});
from How to redirect to Login page when users not logged in the application
the issue with this is that when the user reloads the page (they will still be signed in, but it redirects them to the dashboard page and wipes everything from the url)
How can i solve this?
You have a couple options:
1. Not redirect them if they are logged in
You could just do nothing onAuthStateChanged if the user is logged in.
That could look something like this:
firebase.auth().onAuthStateChanged(user => {
user ? null : history.push("/login");
renderApp();
});
The benefit of this is that the user may enjoy not being forced to navigate on login so this solves that. But he downside is that if there is a reason that in certain cases that you want them to be redirected, nothing will happen.
2. Use a function to conditionally redirect if they are logged in
If the user is on a page with something in the url you may not want to redirect them. Maybe they are on a page for a certain shop item (or any page) and the url is .../shop?item=7987 and you don't want to lose where the user was. But there may be other pages such as a general info or login page where you do want the user to be redirected.
If this case you could call a function like this:
firebase.auth().onAuthStateChanged(user => {
user ? conditionallyNavigate() : history.push("/login");
renderApp();
});
And then inside the conditionallyNavigate() function you can decide what you want to do based on other factors. For example, you could change the behavior based on data stored in state, or you could check the route they are on or the URL parameters and determine if they should be redirected this way. For example:
const conditionallyNavigate = () => {
if ( onCertainPage() ) {
history.push("/dashboard")
}
}
This gives you the benefit of control over when they should be redirected or when you think they are on a page they would like to stay on.
I have a react application using typescript that is set up like a wizard with different pages in each step. I have a 'Forward' and 'Back' button on the page that I created and they work just fine.
What the problem is the browser forward button, I got the back button working. Everytime i go back either using the browser button or my custom back button the forward button is always disabled.
on one page I have this code that fixes my back button
const [finishStatus, setFinishStatus] = useState(false)
const onBackButtonEvent = () => {
if (!finishStatus) {
setFinishStatus(true)
history.push('previous page')
}
}
useEffect(() => {
window.history.pushState(null, 'null', window.location.pathname)
window.addEventListener('popstate', onBackButtonEvent)
return () => {
window.removeEventListener('popstate', onBackButtonEvent)
}
}, [])
can i do something similar to this for the forward button?
I have tried several solutions I have found but nothing is working.
Thanks
Because the browser's forward button is only enabled when the user is navigated back in the browsing history. Which isn't what's happening here:
history.push('previous page')
You're navigating the user forward to a page they were previously viewing, but it's still forward navigation. The browser isn't going to intuitively look at the page and see if it's familiar based on the user's browser history.
To navigate the user backward in standard JavaScript, you might do something like:
history.go(-1)
or:
history.back()
Or, if your history object is imported from react-router-dom or something of that nature, it might be:
history.goBack()
You may need to check the vendor documentation depending on the nature of your history object.
I am using Symfony 3.1 and angularjs. I would like to redirect the users to a login page when the session expires. However, when I delete a session and click on one of the ng-click button in my view, symfony actually redirects to the loginAction in LogInController. However, it does not render the login page.
public function loginAction(Request $request)
{
error_log('Here in login');
// get access to authentication utilities
$authenticationUtils = $this->get('security.authentication_utils');
// get the login error if there is one
$error = $authenticationUtils->getLastAuthenticationError();
// last username entered by the user
$lastUsername = $authenticationUtils->getLastUsername();
// render login.html.twig
return $this->render(
'security/login.html.twig',
array(
// last username entered by the user
'last_username' => $lastUsername,
'error' => $error,
)
);
}
This is the network tab after clicking the ng-click button after deleting the session.
I have a component to which the transition is carried out using a browsRouter. I need to, when the user tries to refresh the page, redirect him to the login page, how can this be done?
You can use the Navigation Timing API. Place this in your component constructor :
if (window.performance && window.performance.navigation.type == 1) {
// Redirect to login page
}
UPDATE 2022
The next code is deprecated
window.performance.navigation.type
Now use getEntriesByType:
const entries = window.performance.getEntriesByType("navigation");
if (entries[0].type === "reload") {
// Redirect to login page
}