2016-11-10 87 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)。