Angular - AuthGuard перенаправляет iframe

Я реализую iFrame в своем угловом приложении. Когда я даю URL-адрес src прямо в html, приложение работает нормально и загружает запрошенный пользовательский интерфейс. Но когда я получаю URL-адрес src из бэкэнда и передаю его в качестве переменной auth Guard, он перенаправляет 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")

Andrei Dumitrescu-Tudor 19.11.2018 08:12

Я пробовал, но результат тот же.

Yerramsetty G D Surya Prakash 19.11.2018 08:26

попробуйте URL-адрес ведения журнала консоли после того, как он был установлен, чтобы убедиться, что это правильное значение. Если это ответ http-вызова, вам может потребоваться вызвать для него result.

Andrei Dumitrescu-Tudor 19.11.2018 08:30

Я зарегистрировал его, значение извлекается, но когда я проверяю, он показывает значение src как null в исходном коде.

Yerramsetty G D Surya Prakash 19.11.2018 08:31

В большинстве случаев он пытается получить доступ к «http: localhost: 4200 / url». Когда я даю src = «url», он обращается к «http: localhost: 4200 / url» и когда я меняю его на [src] = "url", значение url равно нулю.

Yerramsetty G D Surya Prakash 19.11.2018 08:39

Src = «url» - это просто присвоение, а [src] привязывает значение url к этому свойству. Еще одна вещь, которую стоит попробовать, - это сделать ngIf в iframe, чтобы он отображался только тогда, когда установлен url.

Andrei Dumitrescu-Tudor 19.11.2018 08:45

Я дал нгиф. он ждал, пока не появилось значение, но снова попытался получить доступ к «http: localhost: 4200 / url» и был перенаправлен на вход.

Yerramsetty G D Surya Prakash 19.11.2018 08:52

В этом последнем тесте вы использовали квадратные скобки для src, верно? Это должно быть полученное вами значение или null.

Andrei Dumitrescu-Tudor 19.11.2018 08:54

Когда я использую [src] вместе с ngIf, он выдает ошибку «небезопасное значение, используемое в контексте URL ресурса»

Yerramsetty G D Surya Prakash 19.11.2018 08:59

См. Этот stackoverflow.com/a/38269951/10632970, вам нужно сначала очистить URL-адрес

Andrei Dumitrescu-Tudor 19.11.2018 09:01

Добавление дезинфицирующего средства сработало. Спасибо!!

Yerramsetty G D Surya Prakash 19.11.2018 09:25

Добавил его как ответ, чтобы его можно было принять :) @YerramsettyGDSuryaPrakash

Andrei Dumitrescu-Tudor 19.11.2018 09:29
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
12
768
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны использовать квадратные скобки вокруг src, чтобы привязать к нему значение url, в противном случае вы назначаете строку «url» для src. Также используйте ngIf в iframe, чтобы показывать его только при заполнении url. Затем вам нужно очистить URL-адрес. См. Больше на https://stackoverflow.com/a/38269951/10632970.

Другие вопросы по теме