I have two javascript files to handle my webpage login function. First js file authenticates the user and returns a session token which should be passed to second js file for session validation.
Here is the snippet of first js file.
var Login = window.Login || {};
(function scopeWrapper($) {
var apiEndPoint = 'https://4pmsdffwl2.execute-api.ap-southeast-2.amazonaws.com/prod';
Login.sessionId = 'null'
function signin(username, password, onSuccess, onFailure) {
let endpoint = apiEndPoint + '/signin'
let config = {
"username": username,
"password": password
}
return axios.post(endpoint, config)
.then((res) => {
Login.sessionId = res.session_id
console.log(Login.sessionId) \\this prints the session id correctly
onSuccess(res);
return Promise.resolve('/')
})
.catch((err) => {
console.error(err)
onFailure(err)
return Promise.reject('/')
})
}
$(function onDocReady() {
$('#signinForm').submit(handleSignin);
});
function handleSignin(event) {
var email = $('#emailInputSignin').val().toLowerCase();
var username = email;
var password = $('#passwordInputSignin').val();
event.preventDefault();
signin(username, password, email,
function signinSuccess() {
console.log('Successfully Logged In');
window.location.href = 'second.html';
},
function signinError(err) {
alert(err);
}
);
}
}(jQuery));
The idea is to initiate a global variable sessionId which is updated with the session id by login function.
Here is the snippet of second js file where I'm trying to use the sessionId passed in from the first js file.
var Login = window.Login || {};
Login.map = Login.map || {};
(function uploadScopeWrapper($) {
console.log(Login.sessionId) \\This prints null instead of sessionId
if (Login.sessionId) {
window.location.href = 'welcome.html';
} else {
window.location.href = 'login.html';
}
}(jQuery));
I'm not quite sure why the window object is not getting updated with the sessionId that is being generated in signin function.
Sample code in plnkr here: https://plnkr.co/bYECNY
Any help is much appreciated.
Thanks