Angular - AuthGuard 正在重定向 iframe答案

【问题标题】：Angular - AuthGuard is redirecting IframeAngular - AuthGuard 正在重定向 iframe
【发布时间】：2018-11-19 07:07:11
【问题描述】：

我正在我的 Angular 应用程序中实现 iFrame。当我直接在 html 中提供 src url 时，应用程序工作正常并加载请求的 UI。但是，当我从后端获取 src url 并将其作为变量 auth 保护传递时，会将 url 重定向到登录页面。如何解决这个问题？

DefectsManagementComponent.html：

<div class="container-fluid dtep-style dtep-min-height-569px-minus-56px">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
                <iframe id="defects" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" title="Defects Management" src="url">
                </iframe>
            </div>
        </div>
    </div>
</div>

DefectsManagementComponent.ts：

export class DefectsManagementComponent implements OnInit {

  url: string;

  constructor(private service: SolutionInstanceService) {
   }

  ngOnInit() {
    this.service.fetchSolutionByName("DEFECT_MANAGEMENT").subscribe(data =>{
      this.url = data["solutionURL"];
    });
  }

}

AppRoutingModule.ts：

   const routes: Routes = [
        {
         path: "login",
         component: LoginComponent
        },
        {
        path: "home",
        canActivate: [AuthGuardGuard],
        component: HomeComponent
        },
        {
        path: "defects",
        component: DefectsManagementComponent
        },
        {
        path: "",
        redirectTo: "login",
        pathMatch: "full"
        },
        {
        path: "**",
        redirectTo: "login",
        pathMatch: "full"
          }
        ];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule

【问题讨论】：

您可以尝试在方括号中使用 src 吗？ ( [src]="url" )
我试过了，结果还是一样。
在设置后尝试控制台记录 url，看看它是否是正确的值。如果这是一个 http 调用的返回，你可能需要调用它的结果。
我已经记录了它，正在获取值，但是当我检查时，它在源代码中显示 src 的值为 null。
大多数时候它试图访问“http:localhost:4200/url” 当我给 src="url" 时，它正在访问“http:localhost:4200/url”，当我把它改成[src]="url"，url值为null

标签： angular iframe auth-guard

【解决方案1】：

您应该在 src 周围使用方括号将 url 的值绑定到它，否则您将字符串“url”分配给 src。还可以在 iframe 上使用 ngIf 以仅在填充 url 时显示它。然后，您需要清理 url。在https://stackoverflow.com/a/38269951/10632970 上查看更多信息。

【讨论】：