Подтвердить что ты не робот

Аутентификация в angular 2 универсальных, nodejs

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

Я следую этому руководству: 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
    }
}

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

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

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

4b9b3361

Ответ 1

В node вы можете использовать свойства запроса и ответа в своем экспресс-приложении и внедрить их в приложение angular на основе сервера в модуле браузера. 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

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