重定向到 Angular 中动态生成的 html 5

Question

我正在使用 Angular 5 构建 SPA，并且我正在调用身份验证和授权服务。此服务检查我是否有一个会话处于活动状态，如果没有会话或者它是否已过期，那么 returns 401 和一个 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();*/
                    }
                );
    }
}

如您所见，我正在呼叫该服务。如果令牌有效，则无事可做，但如果我没有任何 active/valid 会话，则该服务将 return 401 Unauthorized 并在其有效负载中（.error 字段）我会得到这样的东西：

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

如何让我的应用程序将我重定向到这个生成的页面？

如您所见，我尝试用 window.document.write 编写一个新的 HTML，但没有成功。我了解 Angular 路由器只能重定向到属于应用程序的组件。

提前致谢。

Answer 1

听起来您应该做的是重定向到 error/login 页面或显示一条错误消息，其中部分页面内容从您的服务中填充（不是整个 html 页）。

如果你想走那条路，只需设置一个属性来包含你的 HTML，然后将它绑定到 div 元素的内部 HTML 作为如下：

打字稿

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

模板

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

Answer 2

好的，所以，我找到了一种方法来做到这一点。在我看来，这看起来很 hackish，但这是第一步。如果有人对此有任何建议，请告诉我。

我使用 Javascript 旧方法 将生成的 HTML 的内容附加到我的应用程序的 <body> 标签。由于 HTML 包含 一个未命名的表单 ，我这样做了：

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

它看起来很丑，但这是我目前能得到的最好的。如果有人对此有其他方法，请告诉我。我会将此问题标记为已回答，如果有更好的答案，我会很乐意将其标记为正确答案。

谢谢

重定向到 Angular 中动态生成的 html 5

Redirect to dynamically generated html in Angular 5

javascript

angular

angular-router