Logowanie z wykorzystaniem angulara i php

Cześć,
chciałbym nauczyć się jak zrobić logowanie/rejestrację z wykorzystaniem angulara, najlepiej ng4 i php. Czy ktoś z Was miałby może do polecenia jakiś poradnik? Szukałem już w internecie, idzie co nieco znaleźć, jednak wszystkie z tych, które widziałem, są tworzone na starszej wersji angulara. Największym problemem jest to, że nie wiem w którym miejscu umieszczać pliki php w całej strukturze projektu angularowego.

Pliki php powinny być poza rootem aplikacji, tak aby nikt z zewnątrz nie mógł ich odpalać. Aby skorzystać z plików php w głównym folderze czyli np jakiś public lub public_html dajesz jakiś index.php tak aby był w stanie obsługiwać różne route'y. Jak to zwykle mawiam - ściągnij jakiegoś frameworka phpowego i zobacz przykładowy projekt.

Mozesz też pokusić się o dwie odrębne aplikacje. Angularowy frontend i php owy backend

Do zaimplementowania prostego logowania użyjemy:

• Laravela w wersji 5.5.18
• Angulara w wersji 4.4.6

Ponieważ nie chcę mieszać angulara z laravelem, to stworzyłem sobie taką strukturę:

.
├── backend  <- laravel new backend
└── frontend <- ng new frontend

Najpierw zajmiemy się frontem. Nasza aplikacja nie będzie bardzo skomplikowana. W zasadzie będziemy mieli komponent dla niezalogowanych, tylko dla zalogowanych i stronę do logowania. Tworzenia komponentów nie będę tłumaczył, bo zakładam, że to ogarniasz:

app
├── home
├── navigation
├── protected
└── login

Routing wygląda tak:

// app.module.ts
const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'protected', component: ProtectedComponent },
  { path: 'login', component: LoginComponent }
];

Żeby ktoś nie mógł przejść na jakąś podstronę musimy dodać guarda:

// app.module.ts
const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard]},
  { path: 'login', component: LoginComponent }
];

// auth.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

  private router: Router;

  constructor(router: Router) {
    this.router = router;
  }

  public canActivate(): boolean {
    if (localStorage.getItem('user')) {
      return true;
    }

    this.router.navigate(['/login']);

    return false;
  }
}

Teraz jak ktoś spróbuje wejść na localhost:4200/protected, to go przekieruje na localhost:4200/login.

Czas obsłużyć formularz. Tutaj sprawa jest w miarę prosta. Używamy ngModel itd...

// login.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

  public credentials: { email: string, password: string } = {
    email: '',
    password: ''
  };

  private authService: AuthService;

  constructor(authService: AuthService) {
    this.authService = authService;
  }

  public handleSubmit(): void {
    this.authService.login(this.credentials);
  }
}

Dodajmy również AuthService, który będzie odpowiedzialny za logowanie użytkownika. Na ten moment jest to tylko dummy implementacja, która nic nie robi. W przyszłości dodamy komunikację z naszym backendem napisanym w Laravelu.

// auth.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/observable/empty';

@Injectable()
export class AuthService {

  private http: Http;

  constructor(http: Http) {
    this.http = http;
  }

  public login(credentials: { email: string, password: string }): Observable<Response> {
    localStorage.setItem('user', JSON.stringify(credentials));

    return Observable.empty<Response>();
  }
}

W tym momencie mamy już pierwszą działającą wersję. Użytkownik może się zalogować i przejść na localhost:4200/protected :)
Resztę dodam Ci później, kod masz tu: https://github.com/3amprogrammer/laravel-ng2-auth