在 Angular 中通过 CanActivate 守卫传递 true 时，QueryParams 被编码

Question

在我的 Angular 应用程序中，当我通过 CanActivate 受保护的路由导航到包含查询参数的 URL 时，我的 URL 被编码，因此无法到达预期的组件.示例：

我复制粘贴到浏览器：

http://localhost:4200/orders?pickup=irvine-1-ca

它正确 returns 通过这个守卫是真的：

    canActivate(
        route: ActivatedRouteSnapshot, state: RouterStateSnapshot
    ):
        | boolean
        | UrlTree
        | Promise<boolean | UrlTree>
        | Observable<boolean | UrlTree> {


        return this.authService.user.pipe(

            take(1),
            map(user => {
                const isAuth = !!user;

                console.log("authGuard", user)

                if (isAuth) {
                    return true;
                }

                return this.router.createUrlTree(['/account'], { queryParams: { mode: "login" } });
            })
            
            );
        }
    }

然而，URL 在传递 true 后编码并重定向到以下内容：

http://localhost:4200/orders%3Fpickup%3Dirvine-1-ca

如何正确保存查询参数？帮助赞赏！提前致谢。

编辑：

找到了一个相当粗糙的解决方法。在路由到编码路由导致的错误页面上，自动解码路由并导航到正确编码的版本。如果有人有更优雅的解决方案，我很想听听。

export class ErrorPageComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    // Fix for guard encoding URL with query params. Decoding the URL and redirecting to it if user lands on error page.
    const url = decodeURIComponent(this.router.url);
    if (url !== this.router.url) {
      this.router.navigateByUrl(url);
    }
  }
}

Answer 1

您可以使用 decodeURIComponent()

decodeURIComponent('http://localhost:4200/orders%3Fpickup%3Dirvine-1-ca')

哪个应该 return:

'http://localhost:4200/orders?pickup=irvine-1-ca'

在 Angular 中通过 CanActivate 守卫传递 true 时，QueryParams 被编码

QueryParams getting encoded when passing true through CanActivate guard in Angular

guard

angular