2016-11-10 92 views
10

我下載了nodejs的通用啓動器,並開始從舊的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

在節點您可以在您的角度應用基於瀏覽器模塊上的服務器在你的Express應用程序使用的請求和響應特性和它們注入。 request.cookies擁有一個將KVPS映射到您的Cookie的對象。

對於一些(過時)的例子在此請看這裏和這裏: 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)。