角度5で動的に生成されたhtmlへのリダイレクト

アングル5でSPAを構築しており、認証と認可サービスを呼び出しています。このサービスはセッションがアクティブかどうかをチェックし、セッションがない場合、または有効期限が切れている場合は401 と全社ログインページのHTMLを返します。私はこのように、この呼び出しを行うためのサービスを構築しました：あなたが見ることができるように、私はサービスを呼んでいる角度5で動的に生成されたhtmlへのリダイレクト

@Injectable() 
export class AuthService { 

    private authServicePath = '/<path-to-the-service>'; 
    private authToken: string; 
    private serviceURL: string; 
    private requestOptions: any; 

    constructor(private http: HttpClient, private cookieService: CookieService) { } 

    validateAuth() { 
     this.serviceURL = environment.endpoint + this.authServicePath; 
     this.authToken = this.cookieService.get('SESSION-TOKEN-COOKIE'); 
     this.requestOptions = { 
      headers: new HttpHeaders(
       { 
        'SESSION-TOKEN-COOKIE': this.authToken 
       } 
      ) 
     }; 

     return this 
       .http 
       .get(this.serviceURL, this.requestOptions) 
       .subscribe(
        data => { 
         // Do nothing 
        }, 
        (err: HttpErrorResponse) => { 
         /*window.document.write = err.error; 
         window.document.close();*/ 
        } 
       ); 
    } 
}

。トークンが有効な場合は何もする必要はありませんが、アクティブ/有効セッションがない場合、サービスは401 Unauthorizedを返し、ペイロードには

のようなものが表示されます（ .errorフィールド）。

<html> 
     <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     </head> 
     <body> 
     <form action="..." ...

私は、この生成されたページに私をリダイレクトするようにアプリに指示するにはどうすればよいですか？

ご覧のとおり、window.document.writeで新しいHTMLを書き込もうとしましたが、動作しませんでした。角度ルータはアプリに属するコンポーネントにのみリダイレクトできることを理解しています。

ありがとうございます。

出典

2017-12-04 Alejandro Echeverri

だから、私はこれを行う方法を見つけました。それは私に非常にhackishのように見えますが、それは最初のステップです。誰かがこれに関するアドバイスをお持ちの場合は、お知らせください。

私は、javadript 旧バージョンを使用して、生成されたHTMLのコンテンツを私のアプリケーションの<body>タグに追加しました。 HTMLは無名のフォームを含んでいるので、私はこれをやった：

(err: HttpErrorResponse) => { 
         if (err.status === 401){ 
          document.body.innerHTML = err.error; 
          let form = <HTMLFormElement>document.getElementsByTagName('form')[0]; 
          form.submit(); 
         } 
        }

それは私には醜いが、それは私が現時点で入手可能な最善です。誰かがこれに別のアプローチをしているなら、私に知らせてください。私はこの質問に答えてマークし、より良い答えがある場合は、それを正解と記して喜んで喜んでいます。

おかげ

出典

2017-12-04 19:54:53

あなたはhtmlファイル全体を扱わなければならないので、もっと良い方法を考えることはできません。私はあなたの予約に同意します - しかし、それは動作します... – Steveland83

は、エラー/ログインページにリダイレクトするか、あなたのサービスから移入部分ページの内容（ない全体 HTMLページ）と、エラーメッセージが表示されているものをあなたがやるべきことのようですね。

あなたはそのルートに行きたい場合は、単にあなたのHTMLが含まれており、その後、次のようにdiv要素のInnerHTMLのにそれをバインドするプロパティを設定します。

typescriptです

public myHtmlCode: string = '<b>header</b><p>paragraph</p>';

テンプレート

<div [innerHTML]="myHtmlCode"></div>

出典

2017-12-04 18:45:24 Steveland83

いいえ、残念ながら、サービスによって返されたページは、私が表示する必要がページ全体であるので、私は私のアプリにそれを_embed_ことはできませんが、その代わり、私はそのHTMLを使用する必要があります（つまり、ログインページ）。そのHTMLには、ログイン要求に関する情報があらかじめ入力されているフィールドがあるので、静的ではありません。 –

@AlejandroEcheverri私は見る - その場合、あなたはiframeを使って見る必要があるだろうと思う。 – Steveland83

私はhackish_に見えるので、私は好きではない道を見つけました。コメントがありましたらお知らせください。 –

角度5で動的に生成されたhtmlへのリダイレクト

答えて

関連する問題