Question

在我的Angular 5应用程序中，我使用外部身份验证提供程序进行用户身份验证。我配置了链接，用于通过查询字符串参数打开应用程序中的特定部分。为了通过身份验证过程保存原始所需的URL，我将其保存到本地存储。

当我检索URL时，我似乎无法构造对router.navigate（）的调用来正确处理路由并包含原始查询参数。这可能吗？

示例网址可能是https://myapp.com/contacts/new?assign=customer&id=123

我尝试过 this.router.navigate([fullRedirect], { queryParamsHandling: 'merge' });

但我最终在浏览器中显示了/contacts/new%3Fassign%3Dcustomer%26id%3D123这样的网址，Angular Router将new%3Fassign%3Dcustomer%26id%3D123视为:id的{{1}}，而不是路由到/contacts并包括原始网址参数。

我的目标是在应用程序增长时使用可以使用各种URL参数的通用解决方案。

你有这种事情的成功吗？任何提示将不胜感激。

Answer 1

这个问题很难解释（对不起！）。在从外部身份验证步骤（通过Auth0）返回后首次加载应用程序时，我丢失了查询参数。

完整的网址已保存到浏览器的本地存储中，但我无法实现所需的导航到正确的Angular Route并保留原始查询参数的组合。

在我的身份验证服务中对查询参数的处理进行硬编码被证明是不灵活和繁琐的。

我最终使用NavigationEvent设置和使用navigateByUrl()来完成此工作。

private redirect() {
  let fullRedirect = decodeURI(localStorage.getItem('postAuthRedirect'));
  if (!fullRedirect) {
    fullRedirect = '/';
  }
  // Preserve any query parameters and fragments from the original URL
  const navigationExtras: NavigationExtras = {
    queryParamsHandling: 'preserve',
    preserveFragment: true
  };
  // Do the redirect
  this.router.navigateByUrl(fullRedirect, navigationExtras);
}

该场景非常具体......图片从书签或单独的系统中加载复杂的URL＆＃34;深层链接＆＃34;到Angular app。

Answer 2

不确定您的目的是什么，但是您获得修改后的网址的原因是因为无论何时存储在本地存储或cookie中，它都会被编码。

因此，从本地存储中检索后，您可以使用此

variable = decodeURI（retrieveFromLocalStorage）

然后在路线中使用此变量

从Angular 5中从本地存储中检索的字符串导航到完整URL（包括查询参数）

2 个答案: