У меня есть простое / базовое c понимание вызовов JQuery / AJAX / API, и мне удалось собрать воедино следующий код для приложения для проверки / авторизации пользователя, а затем получить информацию, связанную с этим пользователем, из Wordpress API , У меня есть пара проблем, с которыми я сталкиваюсь с точки зрения пользовательского опыта:
Запуск кода каждый раз, когда пользователь обращается к странице из приложения Ioni c. Я пытался выяснить, как кэшировать результаты, но я не совсем уверен, что понимаю, как или если это возможно с таким типом настройки
- Глядя на сценарии, я чувствую, что должен быть способ оптимизировать это для более быстрой обработки и рендеринга данных ... Я просто не уверен, как это сделать.
Любая помощь / обучение и помощь очень ценится.
Вот сценарии:
$(document).ready(function(){
var jwt = getCookie('jwt');
$.ajax({
url: "https://mydomain.xyz/wp-json/jwt-auth/v1/token/validate",
type : "POST",
contentType : 'application/json',
headers:{
'Authorization': "Bearer" + jwt
},
success : function(result){
showHomePage();
},
error: function(xhr, resp, text){
showLoginPage();
}
});
});
// show login page
function showLoginPage(){
// trigger when login form is submitted
$(document).on('submit', '#login_form', function(){
// get form data
var login_form=$(this);
var form_data=JSON.stringify(login_form.serializeObject());
// submit form data to api
$.ajax({
url: "https:///mydomain.xyz/wp-json/jwt-auth/v1/token",
type : "POST",
contentType : 'application/json',
data : form_data,
success : function(result){
// store jwt to cookie
setCookie("jwt", result.token, 1);
// show home page & tell the user it was a successful login
$('#response').html("<div class='alert alert-success'>Successful login.</div>");
showHomePage();
},
error: function(xhr, resp, text){
// on error, tell the user login has failed & empty the input boxes
$('#response').html("<div class='alert alert-danger'>Authentication Failed. Username or password is incorrect. </div>");
login_form.find('input').val('');
}
});
return false;
});
// trigger to show home page will be here
// remove jwt
setCookie("jwt", "", 1);
// login page html
var html = `
<h2>Member Log In</h2>
<form id='login_form'>
<div class='form-group'>
<input type='text' class='form-control' id='username' name='username' placeholder='Username'>
</div>
<div class='form-group'>
<input type='password' class='form-control' id='password' name='password' placeholder='Password'>
</div>
<button type='submit' class='btn btn-primary'>Login</button>
</form>
`;
$('#content').html(html);
clearResponse();
showLoggedOutMenu();
}
// function to set cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// function to make form values to json format
$.fn.serializeObject = function(){
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
function showHomePage(){
var html = ` <div class="box"><div class="trainingfeed"> </div></div>
<div id="getout"><button id="logout" class="float-left submit-button" >Home</button></div>`;
$('#iframe2').html(html);
var jwt = getCookie('jwt');
$.ajax({
url: 'https://mydomain.xyz/wp-json/wp/v2/pages/2240' /* REPLACE THIS URL */,
dataType: 'json',
method: 'get',
cache: true,
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization',"Bearer"+ jwt);
},
success: function (data) {
$(data).each(function(index, value) {
var jcon = value.content.rendered;
$('.trainingfeed').append('<div class="traininglog">' + jcon + '</div>');
});
},
error: function(xhr, resp, text){
}
});
}
// get or read cookie
function getCookie(cname){
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' '){
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}