Discussion :

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

le service va lui donner une url à visiter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ce service a son décorateur @injectable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ....