Question

所以我有一个内置于Angular中的SPA应用程序，现在的问题是当用户在我的应用程序上按下（浏览器）后退按钮时，有时如果在上一页发送了数据，可能会导致错误，有时处于刷新状态时消失的状态。现在，有什么方法可以让我在回退之前警告用户，或者根本不允许用户回退吗？

我已经尝试在index.html中做到这一点

<script>
    window.onbeforeunload = function() {
       return "Message";
    };
</script>

但是它似乎不再适用于更新的浏览器，我发现了类似的问题here，但它是几年前的事，我尝试了其中的一些解决方案，但都无济于事。 / p>

2018年处理这种情况的最佳方法是什么？

谢谢

Answer 1

您可以使用canActivate路由保护器来允许/阻止导航到路由，并且可以使用canDeactivate路由保护器来允许/阻止导航离开路由（请参阅the Angular documentation）

如果要阻止用户返回已访问过的页面，请使用canActivate路由防护。在this stackblitz中，要求确认，然后返回Login页。另外，它还包含canDeactivate路由的Home路由保护的示例。

以下是canActivate路由的Login路由保护的代码：

activate-guard.ts

import { Injectable } from "@angular/core";
import { CanActivate, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs";
import { LoginActivateService } from "./login-activate.service";

@Injectable()
export class ActivateGuard implements CanActivate {

  constructor(private loginActivate: LoginActivateService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.loginActivate.canActivateLogin || confirm("Do you really want to go back to login?");
  }

}

app-routing.module.ts

...
imports: [
  RouterModule.forRoot([
    {
      path: 'login', component: LoginViewComponent,
      canActivate: [ActivateGuard]
    },
    {
      path: 'home',
      component: HomeViewComponent,
      canDeactivate: [DeactivateGuard]
    },
    ...
  ])
],

Answer 2

您可以订阅路由器的 events 属性（在 Angular 8 中可用 >）它将在每个路由阶段触发一个动作，例如在导航开始、结束、onPopstate 事件、...以及浏览器后退按钮事件。

import { Router } from '@angular/router';

constructor(private router: Router) {
   this.router.events.subscribe((event) => {
  if (event instanceof NavigationStart && event.navigationTrigger === 'popstate') {
      // write the logic here
    }
   });
}

Angular 5会在单击后退按钮之前阻止或警告用户

2 个答案: