Angular 2 Universal 中的身份验证，nodejs

Posted 2023-02-19

【中文标题】Angular 2 Universal 中的身份验证，nodejs

【英文标题】：Authentication in angular 2 universal, nodejs

【发布时间】：2017-03-24 05:47:27

【问题描述】：

我下载了用于 nodejs 的通用启动器并开始从旧的 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
  ]
)

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

提前致谢

【参考方案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）。