2016-11-10 6 views
10

nodejsのuniversal-starterをダウンロードして、古いangular-rc4からマイウェブサイトを移行し始めました。しかし、認証を実装する必要があるとき(私の場合はlocalStorageに格納されているJWTです)、サーバーはlocalStorageとcookieを持っていないので、角度はクライアント上でのみレンダリングされます。角度2のユニバーサル、nodejsの認証

私はこのガイドに従っています:https://github.com/angular/universal-starter/issues/148しかし、それは動作しませんでした。以下は

私のコードです:

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

アプリ.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 
    ] 
}) 

ブラウザの更新を介して?ノードでは、あなたの明示のアプリケーションで要求と応答のプロパティを使用することができますし、ブラウザモジュール上のサーバーに基づいて、角度のアプリケーションでそれらを注入事前

答えて

1

感謝。 request.cookiesには、KVPSをクッキーにマッピングするオブジェクトが格納されています。この上でいくつかの(旧式)例について

こことここを見てください。 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

コードがすぐに時代遅れかもしれませんが、原理が成り立ちます。依存関係インジェクションを使用して、アプリケーションのサーバー上にリクエストを注入し、ブラウザのバージョンにリクエスト(ブラウザのCookieを引き続き表示する可能性があります)を挿入します。