각도 2/.NET의 핵심 - 각도 2 및 .NET 코어에

Question

내가 인증을 구현하기 위해 노력하고 있어요/허가 사전 렌더링 허가 내용 (이 함께 쫓겨 : https://github.com/aspnet/JavaScriptServices)

이 인증 토큰에 대한 내 스토리지 옵션이란 무엇인가 (JWT -) 그래서 클라이언트에서

• ? 액세스 할 수 있습니다 : 로그인에 작성하고 토큰을 갱신하기 위해 필요한 경우
서버에서
• GET/POST 요청을 할 때, 읽기 : 노드가 응용 프로그램을 사전 렌더링 할 때 (읽기 동일한 요청이지만 노드 컨텍스트에서)

보호 된 콘텐츠를 미리 렌더링하는 것은별로 중요하지 않습니다. 색인 된 콘텐츠가 없기 때문에 보호 콘텐츠를 다시 렌더링 할 수는 없지만 깜박 거리는 문제가 다시 발생합니다. - (내 시나리오)이 토큰에 액세스 할 수없는 노드 때문에 서버가 내용이없는 HTML을 반환

은 현재 내가 브라우저의 로컬 저장소에 내 토큰을 저장 (경우에 내용에 승인이 필요) :

localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token })); 

을 .. . /이 채택

let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token }); 
let options = new RequestOptions({ headers: headers }); 
this.http.get(url, options).subscribe(response => callback(<any>response)); 

정말 조기 교육에 있어요 - 나는 또한 것 : 분명히 노드는

가

간단한 GET 요청이 ... 그런 일이 없으며 액세스 할 수 없습니다 다른 인증 방법을 고려해야하지만 승인 된 콘텐츠를 미리 렌더링 할 수있는 규칙을 따라야합니다.

Answer 1

쿠키를 토큰 저장소로 사용하고 토큰을 쿠키에서 asp-prerender-module로 전달하여이 문제를 해결할 수있었습니다.

클라이언트와 서버에 대한

저장소 서비스 :

declare var tokenStorage: NodeTokenStorage;  

@Injectable() 
export class TokenStorageService implements NodeTokenStorage { 

    getItem(key: string): string { 
     if (!isBrowser) { 
      return tokenStorage.getItem(key); 
     } 
     else { 
      return getCookie(key); 
     } 
    } 

    setItem(key: string, value: string): void { 
     if (!isBrowser) { 
      tokenStorage.setItem(key, value); 
     } 
     else { 
      setCookie(key, value, 1); 
     } 
    } 

    removeItem(key: string): void { 
     if (!isBrowser) { 
      tokenStorage.removeItem(key); 
     } 
     else { 
      removeCookie(key); 
     } 
    } 
} 

interface NodeTokenStorage { 
    getItem(key: string): string; 
    setItem(key: string, value: string): void; 
    removeItem(key: string): void; 
} 

모듈 사전 렌더링 쿠키를 주입 :

<app 
    asp-prerender-module="ClientApp/dist/main-server" 
    asp-prerender-data='new { token = Context.Request.Cookies["token"] }'> 
    Loading... 
</app> 

는 그것을 다음과 같은 방법으로 읽기 (을 ClientApp/부팅 server.ts 일) :

(global as any).tokenStorage = { 
    getItem: function(key) { 
     return this[key]; 
    }, 
    setItem: function (key, value) { 
     this[key] = value; 
    }, 
    removeItem: function(key) { 
     this[key] = undefined; 
    } 
} 

export default createServerRenderer(params => { 

    (global as any).tokenStorage.setItem('token', params.data.token); 

    return new Promise<RenderResult>((resolve, reject) => { 
     const requestZone = Zone.current.fork({ 
      name: 'angular-universal request', 
      properties: { 
       baseUrl: '/', 
       requestUrl: params.url, 
       originUrl: params.origin, 
       preboot: false, 
       document: '<app></app>' 
      }, 
      onHandleError: (parentZone, currentZone, targetZone, error) => { 
       // If any error occurs while rendering the module, reject the whole operation 
       reject(error); 
       return true; 
      } 
     }); 

     return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule)).then(html => { 
      resolve({ html: html }); 
     }, reject); 
    }); 
}); 

다음 - 앱이 시작될 때 (서버 측에서 라우팅 설정 및 절약 설정 이전에) : 나는 인증 된 사용자에게 필요한 데이터를 얻기위한 토큰. 이렇게하면 모든 인증 내용과 사용자 별 데이터를 포함하여 서버에서 완전한 HTML로 돌아옵니다.

조회 : https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#server-side-prerendering