Question

我正在使用 Angular 5 构建SPA，我正在调用身份验证和授权服务。此服务检查我是否有活动会话，如果没有会话或者是否已过期，则返回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();*/
                    }
                );
    }
}

如您所见，我正在致电该服务。如果令牌有效则没有任何事情可做，但如果我没有任何活动/有效会话，那么该服务将返回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 Router只能重定向到属于该应用程序的组件。

提前致谢。

Answer 1

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

如果你想要去那条路线，只需设置一个属性来包含你的HTML，然后将它绑定到div元素的InnerHTML，如下所示：

<强>打字稿

r'\D{n}'

<强>模板

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

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 5中动态生成的html

2 个答案: