2016-11-10 3 views
10

Ich habe Universal-Starter für Nodejs heruntergeladen und migriert meine Website von alten eckigen-rc4. Aber wenn ich die Authentifizierung implementieren muss (in meinem Fall ist es JWT, die in localStorage gespeichert ist), hat der Server nicht localStorage und Cookie, so dass angular nur auf dem Client gerendert wird.Authentifizierung in Winkel 2 universal, nodejs

Ich habe diese Anleitung folgen: https://github.com/angular/universal-starter/issues/148 aber es hat nicht funktioniert.

Unten ist mein Code:

authentication.services.ts

import { OpaqueToken } from '@angular/core'; 

export let AUTH_SERVICES = new OpaqueToken('auth.services'); 

export interface AuthenticationService { 

    forgotPassword(email: any); 

    isAuthenticated(); 

    getCurrentUser(); 

    refreshToken(); 

    signin(user : any); 

    signout(); 

    signup(user : any); 

} 

server.authentication.ts

import { Injectable } from '@angular/core'; 

import { AuthenticationService } from './authentication.services'; 

@Injectable() 
export class ServerAuthenticationService implements AuthenticationService { 
    forgotPassword(email: any) { 
     throw new Error('Forgot password cannot be called while doing server side rendering'); 
    } 

    isAuthenticated() { 
     return false; 
    } 

    getCurrentUser(){ 
     if(this.isAuthenticated()) { 
      return {}; 
     } 
     return {}; 
    } 

    refreshToken() { 

    } 

    signin(user : any) { 
     throw new Error('Login cannot be called while doing server side rendering'); 
    } 

    signout() { 
     throw new Error('Logout cannot be called while doing server side rendering'); 
    } 

    signup(user : any) { 
     throw new Error('Sign up cannot be called while doing server side rendering'); 
    } 
} 

clientAuthentication.services.ts

@Injectable() 
export class UserService implements AuthenticationService { 
    forgotPassword(email: any){ 
     // client implementation 
    } 

    isAuthenticated() { 
     // client implementation 
    } 

    getCurrentUser() { 
     // client implementation 
    } 

    refreshToken() { 
     // client implementation 
    } 

    signin(user : any){ 
     // client implementation 
    } 

    signout(){ 
     // client implementation 
    } 

    signup(user : any) { 
     // client implementation 
    } 
} 

App .b rowser.module.ts

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ AppComponent ], 
    imports: [ 
    UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included 
    FormsModule, 

    SharedModule, 
    HomeModule, 
    AboutModule, 

    NavbarModule, 

    AppRoutingModule 
    ], 
    providers: [ 
    { provide: 'isBrowser', useValue: isBrowser }, 
    { provide: 'isNode', useValue: isNode }, 

    { provide: 'LRU', useFactory: getLRU, deps: [] }, 
    { provide: AUTH_SERVICES, useFactory: UserService}, 
    CacheService 
    ] 

}) 

app.node.module.ts

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ AppComponent ], 
    imports: [ 
    UniversalModule, // NodeModule, NodeHttpModule, and NodeJsonpModule are included 
    FormsModule, 

    SharedModule, 
    HomeModule, 
    AboutModule, 

    NavbarModule, 

    AppRoutingModule 
    ], 
    providers: [ 
    { provide: 'isBrowser', useValue: isBrowser }, 
    { provide: 'isNode', useValue: isNode }, 

    { 
     provide: 'LRU', 
     useFactory: getLRU, 
     deps: [ 
     [new Inject('LRU'), new Optional(), new SkipSelf()] 
     ] 
    }, 
    { provide: AUTH_SERVICES, useFactory: ServerAuthenticationService }, 
    CacheService 
    ] 
}) 

Dann, wie die gleiche Seite ausgegeben haben, während auf dem Client über einen Router Übergang vs auf dem Server zu dieser Seite navigieren über einen Browser aktualisieren?

Vielen Dank im Voraus

Antwort

1

In Knoten Sie die Anfrage- und Antworteigenschaften in Ihrer ausdrücklichen Anwendung sie in Ihrem Winkel Anwendung und injizieren basierend auf dem Server auf dem Browsermodul verwenden können. request.cookies enthält Objekte, die KVPS auf Ihre Cookies abbilden.

Für einige (veraltet) Beispiele hierzu bitte hier und hier: https://github.com/angular/universal-starter/blob/master/src/node.module.ts#L43 https://github.com/angular/universal-starter/blob/master/src/browser.module.ts#L52

Der Code könnte bald veraltet, aber das Prinzip gilt. Verwenden Sie Dependency Injection, um die Anfrage auf dem Server in Ihrer App und einige Stub für die Anfrage (die möglicherweise noch die Cookies des Browsers ausgesetzt) ​​in der Version für den Browser zu injizieren.