时间戳

首页 > 解决方案 > Angular 7 Route Guards 仍然更改 URL

angular - Angular 7 Route Guards 仍然更改 URL

问题描述

我的应用程序无法在 url 地址屏幕中显示更改。现在，我的应用程序位于 localhost:4200/，仅此而已。所以我花时间确保我的导航链接禁用位置更改：

<a [routerLink]="[screenPath]" skipLocationChange>

我在一项服务中有一个集中位置，当需要更改屏幕时处理路由：

if (route) {
  this.router.navigate([newRoute], {relativeTo: route, skipLocationChange: true});
} else {
  this.router.navigate([newRoute], {skipLocationChange: true});
}

在我的主应用程序路由模块中，我跳过了初始导航：

@NgModule({
  imports: [RouterModule.forRoot(routes, {initialNavigation: false})],
  ....
})

在我的导航发生的子路线中，我有警卫根据某些条件防止某些导航发生：

const routes: Routes = [
{ path: 'somepath', component: SomeFormComponent, canActivate: [WorkFlowGuard] },
{ path: 'anotherpath', component: AnotherFormComponent, canActivate: [WorkFlowGuard]},
....
];

我的 WorkFlowGuard 返回一个简单的布尔值来确定路径是否被允许：

canActivate(next: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
{
  // GRAB CURRENT PATH AND VERIFY
  const path = next.routeConfig.path;
  console.log(`GUARD - verify path: '${path}'`);
  const allow = this.verifyWorkFlow(path);
  return allow;
}

当我能够访问一个屏幕时，或者当我通过表单按钮移动到下一个屏幕时，指向的 url 不会改变，这太棒了！但是，只要 WorkFlowGuard 被激活并返回 false 以阻止我访问某个屏幕，顶部的 url 就会更改。换句话说，如果我在“某个路径”上，并且在无法访问“另一个路径”时尝试访问，则顶部的 url 将从

本地主机：4200/

至

本地主机：4200/somepath

为什么会发生这种情况，我能做些什么来防止 URL 更改发生？

标签： angularurlrouterangular-guards

解决方案

推荐阅读