时间戳

首页 > 解决方案 > Angular 4初始页面加载可以停用路由保护不起作用

javascript - Angular 4初始页面加载可以停用路由保护不起作用

问题描述

使用 canDeactivate 保护我试图阻止浏览器返回操作。所以，现在在我的浏览器新选​​项卡上加载网站 url 成功地让我进入初始页面。现在，无需在页面上进行任何用户交互，按下浏览器后退按钮即可将我带回到新的选项卡/空白页面状态，而根本无需进入保护代码。但是，如果我在按下后退按钮之前单击应用程序中的任意位置/滚动，则可以很好地触发防护。如何使防护在初始页面上没有用户交互或通过代码触发用户交互的情况下运行？

在登陆组件中，我尝试创建一个隐藏元素并尝试将注意力集中在 onInit 内部，但没有成功。

我正在延迟加载 app-routing.module.ts 中的模块

const routes: Routes = [
{
   path: '',
   children: [
   { path: '', redirectTo: '', pathMatch: 'full' },
   { path: 'dashboards',
      loadChildren: './dashboards/dashboards.module#DashboardsModule',
      canLoad: [GoBackGuard],
      canDeactivate: [GoBackGuard]
   }]}];

还尝试了 javascript 代码来防止浏览器返回导航，但也没有帮助。

<script>
$(window).load(function(e){
   window.history.pushState(null, "", window.location.href);
window.onpopstate = function() {
   window.history.pushState(null, "", window.location.href);
}
});
</script>

标签： javascriptangularbackangular-router-guards

解决方案

将以下内容添加到您的app.component.ts构造函数中：

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
  history.pushState(null, null, document.URL);
});

这将阻止浏览器的后退按钮。如果您单击返回，它不会带您回到新标签或上一个标签。

推荐阅读