在角度2通用,nodejs中进行身份验证

Question

我为nodejs下载了universal-starter并开始从old angular-rc4迁移我的网站.但是当我必须实现身份验证时(在我的情况下它是存储在localStorage中的JWT),服务器没有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
  ]
})

那么如何通过路由器转换在服务器上导航到该页面时通过浏览器刷新在服务器上导出相同的页面输出？

提前致谢

Answer 1

在节点中，您可以在快速应用程序中使用请求和响应属性，并将它们注入基于浏览器模块上的服务器的角度应用程序中。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）。