Logowanie Angular i PHP

Question

Witam,

mam problem z logowaniem poprzez angulara i php.
Właśnie stawiam swoje pierwsze kroki z angularem i mam prośbę. Ktoś mi może mnie naprowadzić jak to zrobić żeby działało mi logowanie.
Oto mój kod:
 

<div class="container" ng-app="loginApp" ng-controller="loginController">
    <form class="login-container"  ng-submit="doLogin()" >
        <span class="text-danger" ng-show="loginError"></span>
        <div class="form-group">
            <label for="Email/Login">Email lub Login</label>
            <input ng-model="insert.username" type="text" class="form-control" name="login">
        </div>
        <div class="form-group">
            <label for="Password">Hasło</label>
            <input ng-model="insert.Password" type="password" class="form-control" name="password">
        </div>
        <button type="submit" id="login-button" class="btn btn-outline-primary">Zaloguj</button>
    </form>
</div>

<script src="{{{URL}}}js/buttons/login-button.js"></script>
<script>
    var app = angular.module('loginApp',[]);

    app.controller('loginController', function($scope, $http){
        $scope.insert = {};
        $scope.doLogin = function() {
            $http.post({
                url: URL+'zaloguj/test',
                data: $scope.insert
            }).success(function(data){
                if (data.error) {
                    $scope.loginError = data.error.errorLogin;
                } else {
                    window.location.href = URL;
                }
            });
        }
    });
</script>

 

Metoda kontrolera php:

    public function test()
    {
        $dataNg = $this->getJsonFromInput();
        $this->model = new \App\Models\Login($dataNg->username,$dataNg->password);
        $data = array();
        $error = array();

        if ($this->model->doLogin()) {
            $data['success] = 'Ok';
        } else {
            $error['errorLogin'] = 'Podaj prawidłowy login i hasło';
            $data['error'] = $error;
        }
        $this->encodeJson($data);
    }

 

Funkcje encodeJson i getJsonFromInput:
 

    public function getJsonFromInput()
    {
        return json_decode(file_get_contents("php://input"));
    }

    public function encodeJson($data)
    {
        echo json_encode($data);
    }

 

Comments

I mam pytanko, czy w Angularze jest odpowiednik funkcji beforeSend jak w Jquery?

---

Napisz z czym konkretnie masz problem, bo to że "nie działa" nie mówi nic konkretnego :)

window.location.href = URL;

AngularJS ma do tego wbudowany serwis $location, który udostępnia odpowiednie metody.

<script src="{{{URL}}}js/buttons/login-button.js"></script>

To Ci w ogóle działa? Domyślnie interpolację wywołujesz dwoma "wąsami", chyba, że sobie to zmieniłeś.

czy w Angularze jest odpowiednik funkcji beforeSend jak w Jquery?

Domyślnie nie, ale możesz sobie dopisać taką funkcjonalność (ja się w takie coś nie bawiłem):

https://docs.angularjs.org/api/ng/service/$http#interceptors

---

Potrójne nawiasy wynikają z tego że korzystam z TWIG-a i musiałem dostosować nawiasy żeby nie kolidowały z Angularem.
URL jest to stała globalna. Przechowuje mi adres bezwględny, w tym przypadku:
http://localhost/nazwa-projektu/

A nie waliduje mi formularza albo Angular nie wysyła zmiennym jsonem albo źle je przekazuje do $scope.

---

Zobacz sobie w konsoli stan formularza (czy jest zwalidowany) przed wysyłką na serwer. Co dostajesz po stronie backendu?

---

Niestety teraz nie mogę tego sprawdzić bo nie jestem w domu.
Dopiero jutro dam radę to sprawdzić.

Answer 1

Poprawiłem kod. Żądanie się wysyła w JSON-ie tak jak powinno, lecz odpowiedź wraca w nieprzetworzonych danych.

I zauważyłem, że w odpowiedzi znajdują się moje zmienne sesyjne?! Ale nie mam pojęcia dlaczego jak ja przekazuje tylko dane z tablicy asocjacyjnej $data.

$this->encodeJson($data);

Dodatkowo mam ustawione nagłówki w metodzie gdzie odbywa się walidacja i dodawanie danych.

        header("Access-Control-Allow-Origin: *");
        header("Content-Type: application/json; charset=UTF-8");

I teraz pytanie jak przekazać dane z żądanie do JSON-a?

Comments

Nowy kod:

var app = angular.module("myApp", []);
app.config(['$qProvider', function ($qProvider) { $qProvider.errorOnUnhandledRejections(false);
}]);
app.controller("loginController", function($scope, $http){ $scope.insert = {};
    $scope.doLogin = function(){ $http({ method:"POST",
            url:URL+"login/test",
            data:$scope.insert
        }).then(function successCallback(response){
            if (response.data.error) { $scope.errorLogin = response.data.error.errorLogin;
            } else { window.location.href=URL;
            } });
    } });

 

Przykład odpowiedzi żądania XHR:
{"error":{"errorLogin":"Podaj prawid\u0142owy login i has\u0142o"}}array(1) {
  ["token"]=>
  string(86) "przykładowy token"
}