angular2 d'ou provient la route api authenticate

Version imprimable

Bonjour, j'essayer de comprendre ce tuto:

http://jasonwatmore.com/post/2016/08...ample-tutorial

dans le tuto il y une route qui n'est pas déclarer:

dans le service authentification.service.ts il y une méthode qui récupère cette route et vérifie que l'identifiant est bon:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 login(username, password): Observable<boolean> {
        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                let token = response.json() && response.json().token;
                if (token) {
                    // set token property
                    this.token = token;
 
                    // store username and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
 
                    // return true to indicate successful login
                    return true;
                } else {
                    // return false to indicate failed login
                    return false;
                }
            });
    }

ici

Code:

1
2
 
        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))

j'ai recherché dans app.routing.ts s'il existe cette route:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
  import { Routes, RouterModule } from '@angular/router';
 
import { LoginComponent } from './login/index';
import { HomeComponent } from './home/index';
import { AuthGuard } from './_guards/index';
 
const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
 
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];
 
export const routing = RouterModule.forRoot(appRoutes);

je n'ai que la route login qui connais et la racine "".

(j'utilise la version 2.1.0)

merci de vos réponses.

19/11/2016, 18h56
dukoid

il simule l'accès à une API REST.

normalement on devrait avoir une url complete mais là juste un bout suffit pour simuler l'accès aux données.
ça renvoit donc de fausses données en dure au lieu de le recup d'un serveur REST

merci de ta réponse dukoid :)

mais j'arrive pas à comprendre pourquoi il redirige alors vers cette adresse une fois qu'on a valider le formulaire (sauf si j'ai pas encore compris )

voici ce que je pense comprendre:

une fois qu'on a mis nos identifiant, on appelle cette méthode:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(result => {
                if (result === true) {
                    this.router.navigate(['/']);
                } else {
                    this.error = 'Username or password is incorrect';
                    this.loading = false;
                }
            });
    }

ensuite on appelle le service ,qui appelle

Code:

1
2
 
this.authenticationService.login(this.model.username, this.model.password)

donc ici en paramètre nos identifiant

la méthode login du service fait ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
    login(username: string, password: string): Observable<boolean> {
        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                let token = response.json() && response.json().token;
                if (token) {
                    // set token property
                    this.token = token;
 
                    // store username and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
 
                    // return true to indicate successful login
                    return true;
                } else {
                    // return false to indicate failed login
                    return false;
                }
            });
    }

ici on demande à angular de consommer un webservice
ce webservice return un observable de type booléen, donc soit on peut se connecté soit pas.

comment angular écoute cette faux webservice ?

A quel moment lorsque j'appel l'url /api/authenticate , angular sais qu'il faut faire appelle au fichier fake-backend.ts ?

Code:

1
2
 
     return this.http.post // qui envoie ce poste ? le client ou le wbs ?

c'est le "client" qui envoie un poste au faux "webservice" ou l'inverse ?(d'après ce que je comprend clent=> post => wbs)

Je pense avoir compris pourquoi il n'y a pas de route inscrit dans route.ts:

Lorsqu'on clique sur login du formulaire on actionne le service:

Code:

1
2
 
        this.authenticationService.login(this.model.username, this.model.password)

le service va lui donner une url à visiter

Code:

1
2
 
 return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))

ce service a son décorateur @injectable

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
@Injectable()
export class AuthenticationService {
    public token: string;
 
    constructor(private http: Http) {
        // set token if saved in local storage
        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
        this.token = currentUser && currentUser.token;
 
    }
 
    login(username: string, password: string): Observable<boolean> {
        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))

Dans le module princpal on a la liste des providers et on trouve fakeBackendProvider

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule } from '@angular/http';
 
// used to create fake backend
import { fakeBackendProvider } from './_helpers/index';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';
 
import { AppComponent }  from './app.component';
import { routing }        from './app.routing';
 
import { AuthGuard } from './_guards/index';
import { AuthenticationService, UserService } from './_services/index';
import { LoginComponent } from './login/index';
import { HomeComponent } from './home/index';
 
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        routing
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        HomeComponent
    ],
    providers: [
        AuthGuard,
        AuthenticationService,
        UserService,
 
        // providers used to create fake backend
        fakeBackendProvider,
        MockBackend,
        BaseRequestOptions
    ],
    bootstrap: [AppComponent]
})

en retournant cette route

Code:

1
2
 
    return this.http.post('/api/authenticate',

le module.app.ts du provider va intecepter le AuthenticationService puis le faux backend .
comme ce module est charger tout le temps on la condtion si on a cette route on va sur le faut backend:

Code:

1
2
 
 if (connection.request.url.endsWith('/api/authenticate') && connection.request.method === RequestMethod.Post) {

Ce n'est pas évident de suive et de l'expliquer ....