首页 文章

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

提问于
浏览 次
-1

在我的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 这样的URL，Angular Router将 new%3Fassign%3Dcustomer%26id%3D123 视为 :id /contacts ，而不是路由到 /contacts/new 并包含原始URL参数 .

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

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

angular angular-router

2 回答

  • 1

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

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

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

    我最终使用 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，“深度链接”到Angular应用程序 .

    回复于
  • 0

    不知道你在做什么，但你获得修改后的URL的原因是因为无论何时存储在本地存储或cookie中，它都会被编码 .

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

    variable = decodeURI（retrieveFromLocalStorage）

    然后在您的路线中使用此变量

    回复于

相关问题