Аутентификация в angular 2 universal, nodejs

Я скачал универсальный стартер для nodejs и начал перенос своего сайта со старого angular-rc4. Но когда мне нужно реализовать аутентификацию (в моем случае это JWT, который хранится в localStorage), на сервере нет localStorage и cookie, поэтому angular отображается только на клиенте.

Я следую этому руководству: https://github.com/angular/universal-starter/issues/148, но это не сработало.

Ниже мой код:

аутентификация.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.browser.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
  ]
})

Тогда как получить один и тот же вывод страницы при переходе на эту страницу на клиенте через переход маршрутизатора по сравнению с сервером через обновление браузера?

заранее спасибо


person user3027246    schedule 10.11.2016    source источник


Ответы (1)


В узле вы можете использовать свойства запроса и ответа в своем экспресс-приложении и вводить их в свое угловое приложение на основе сервера в модуле браузера. request.cookies содержит объекты, которые сопоставляют KVPS с вашими файлами cookie.

Некоторые (устаревшие) примеры по этому вопросу см. здесь и здесь: https://github.com/angular/universal-starter/blob/master/src/node.module.ts#L43 https://github.com/angular/универсальный-стартер/blob/master/src/browser.module.ts#L52

Код может скоро устареть, но принцип сохраняется. Используйте внедрение зависимостей, чтобы внедрить запрос на сервер в ваше приложение и некоторую заглушку для запроса (которая может по-прежнему раскрывать файлы cookie браузера) в версии для браузера.

person Sam Vloeberghs    schedule 03.05.2017