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

标签 javascript angular angular-router

我正在使用 Angular 5 构建 SPA,并且正在调用身份验证和授权服务。 该服务检查我是否有事件 session ,如果没有 session 或 session 已过期,则返回 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();*/
                    }
                );
    }
}

如您所见,我正在调用该服务。如果 token 有效,则无需执行任何操作,但如果我没有任何事件/有效 session ,则服务将返回 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 只能重定向到属于应用程序的组件。

提前致谢。

最佳答案

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

如果您想走这条路,只需设置一个属性来包含您的 HTML,然后将其绑定(bind)到 div 元素的 InnerHTML,如下所示:

typescript

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

模板

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

关于javascript - 重定向到 Angular 5 中动态生成的 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47639766/

相关文章:

angular - 将组件引用传递给 ngFor 内部的组件(Angular)

javascript - 使用 pdfmake 在段落周围添加边框

javascript - 从经典 ASP 中转义 Javascript 变量中的引号

javascript - meteor : How to get iron-router parameter in template

javascript - Angular Material 扩展面板延迟渲染

Angular 路线 : redirectTo when using multiple param

javascript - 创建翻滚指针动画

dependency-injection - 依赖注入(inject) : Angular 2 not working

javascript - 为什么 Angular 加载我的根模板两次

angular - 在 Angular 4 中使用 ID 进行路由