如何在 Angular 中更新上一页 URL

Question

问题：如何url从历史记录中删除以前的路线，以便浏览器“返回”按钮跳过它？在我的应用程序中，如果数据无效或其他问题 -Angular执行重定向到错误页面。但是如果在浏览器中按下“返回”按钮 - 用户会再次被重定向到错误页面并从那里重定向到错误页面。所以这是一种无休止的循环。这个想法是url从历史记录中删除以前的（带有无效数据的），因此以前的重定向会导致之前的页面url带有无效数据。我们browser.location在 vanilla 中有一些api JS，但是如何做到这Angular一点呢？更新：有很多方法可以获取上一个 url，例如：如何在 Angular 中确定上一个页面的 URL？. 但是怎么设置呢？解决方案：我尝试使用Angular Location.replaceState()来覆盖历史记录。出于某种原因，它只是删除了一个历史条目而没有替换它：https : //angular.io/api/common/Location#replaceState 类似的行为发生在vanilla JS History.replaceState()：https : //developer.mozilla.org/en-US/docs/Web /API/历史/replaceState我最终改变设计，使用skipLocationChange: true在NavigationExtras： https://angular.io/api/router/NavigationExtras 所以巴林特Réthy的答案最适合。

Answer 1

您需要使用导航选项。当您收到导航到错误页面的错误时，应该使用NavigationExtras来实现。您可以在那里定义skipLocationChange或replaceUrl。

• skipLocationChange 在导航更改时跳过以将状态推送到历史记录

• replaceUrl 重新定义历史中的当前状态

代码应如下所示：

this.router.navigate(['/error'], { replaceUrl: true });

文档参考：https : //angular.io/api/router/NavigationExtras

Answer 2

Angular 路由保护 CanActivate 方法将帮助您解决我们的问题，当用户导航或尝试从一个屏幕导航到另一个屏幕时它会触发。它还将为您提供可以根据您的要求轻松操作的下一个 url 路由。您只需在提供程序中包含路由保护并实现 CanActivate 路由保护。

step 1-实现CanActivate接口

import { Injectable } from '@angular/core';

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({

  providedIn: 'root',

})

export class AuthGuard implements CanActivate {

  canActivate(

    next: ActivatedRouteSnapshot,

    state: RouterStateSnapshot): boolean {

    // here you can write you logic example-> you can navigate to some where else protect navigation

    console.log('AuthGuard#canActivate called');

    return true;

  }

}

第 2 步 -> 告诉你的路由表你有一个守卫来保护你的路由：P

 import { AuthGuard }  from '../auth/auth.guard';

    const adminRoutes: Routes = [

    { path: 'crises', component: ManageCrisesComponent },

    { path: 'admin',  component: AdminComponent, canActivate: [AuthGuard]} // -->your Auth guard will get register here 

    ];

Answer 3

对我来说，后退按钮是浏览器和用户的问题。我将解释我自己，如果用户想回去，你应该让他们回去，这对我来说是正确的方式，通常的流程以及应该如何完成。

但为了实现这一点，您可以这样做：

在您的错误页面中，您可以使用 history.pushState 文档：https : //developer.mozilla.org/en-US/docs/Web/API/History/pushState

  history.pushState(null, null, window.location.href);