Witam wszystkich,
Piszę sobie właśnie dla przećwiczenia wiedzy prostą aplikacje z wykorzystaniem ajax. Obecnie jestem na etapie implementacji mechanizmu uwierzytelnienia, ale mam problem, który prawdopodobnie wynika z nie zrozumienia pewnych zasad rządzących programowaniem asynchronicznym.
Otóż kiedy użytkownik klika sobie na stronie w przycisk 'zaloguj', wywołuje metodę, która zmienia widoki (template). Na razie działa to na zasadzie ukrywania i pokazywania równorzędnych div w jednym html (później prawdopodobnie przerzuce je do osobnych plikow html i bedę robił injection). Jeśli kliknę w ten specyficzny przycisk, który ma mnie przenosić do widoku wymagającego autoryzacji, to wcześniej w tej metodzie uruchamiam inną metodę odpowiadającą za uwierzytelnienie.
Uwierzytelnienie, może mieć kilka scenariuszy, albo hasło i login się zgadzają i metoda uwierzytelniania nie robi nic, albo jakieś dane nie pasują i chciałbym, żeby w tym momencie podrzędna metoda uwierzytelniania przerywała nadrzedną(w której jest umieszczona) metodę ładowania widoków. O ile gdy np. w bloku if else umieszcze gdzieś sobie return false i wszystko działa po mojej myśli, o tyle z osiągnięciem tego efektu w funkcji asynchrinicznej jest problem. Próbowałem ze standardową funkcją ajax i paramtrem async: false, próbwałem również bawić sie z obiektem deffered, ale efekt zawsze był ten sam - return nie wykonywał się.
Metoda do zmiany widoków:
changeView(el, wait, time, displayType){
var newView = '';
if(el === 'work'){
if(actions.authentication() == false){
return false;
}
}
el !== 'last' ? (
newView = `#${el}-view`
) : (
newView = `#${params.lastView}`
);
setTimeout(function(){
$('.view').animate({opacity: 0}, time);
}, wait);
setTimeout(function(){
$('.view').css('display', 'none');
}, wait+time);
setTimeout(function(){
$(newView).css('display', displayType).animate({opacity: 1}, time);
}, wait+time)
}
Metoda do weryfikacji:
authentication(){
var userLogin = $('#user-login').val(),
userPassword = $('#user-password').val(),
usersJson = "";
try{
if(userLogin && userPassword){
$.getJSON('js/users.json', function(data){
var usersJson=data.users,
userJsonLength = data.users.length,
i=0,
def = $.Deferred();
for(let prop of usersJson){
i++;
if(prop.login === userLogin){
alert(`Find that user in Json!`);
}
else{
if(i==userJsonLength){
//return false - ten nie wykona sie, bo jest wewnatrz ajax;
alert('Incorrect user');
}
}
}
})
//return false - ten return przerwie metode changeView - jest poza ajax;
}
else{
throw ("Empty fields");
}
}
catch(err){
alert(err);
return false;
}
}