从Angular 5中从本地存储检索的字符串导航到完整URL(包括查询参数)
在我的Angular 5应用程序中,我使用外部身份验证提供程序进行用户身份验证。我配置了一些链接,这些链接旨在通过查询字符串参数打开应用程序中的特定部分。为了通过身份验证过程保存所需的原始URL,我将其保存到本地存储 检索URL时,我似乎无法构造对router.navigate()的调用来正确处理路由并包含原始查询参数。这可能吗 示例URL可能是从Angular 5中从本地存储检索的字符串导航到完整URL(包括查询参数),angular,angular-router,Angular,Angular Router,在我的Angular 5应用程序中,我使用外部身份验证提供程序进行用户身份验证。我配置了一些链接,这些链接旨在通过查询字符串参数打开应用程序中的特定部分。为了通过身份验证过程保存所需的原始URL,我将其保存到本地存储 检索URL时,我似乎无法构造对router.navigate()的调用来正确处理路由并包含原始查询参数。这可能吗 示例URL可能是https://myapp.com/contacts/new?assign=customer&id=123 我试过和你一起工作 this.router
https://myapp.com/contacts/new?assign=customer&id=123
我试过和你一起工作
this.router.navigate([fullRedirect],{queryParamsHandling:'merge'});
但我在浏览器中最终得到了一个类似/contacts/new%3Fassign%3Dcustomer%26id%3D123
的URL,Angular Router将新的%3Fassign%3Dcustomer%26id%3D123
视为/contacts
的:id
,而不是路由到/contacts/new
并包含原始URL参数
我的目标是拥有一个通用的解决方案,随着应用程序的发展,它可以处理各种URL参数
你做这种事成功了吗?任何提示都将不胜感激。不确定您正在使用什么,但您获得修改后的url的原因是,每当您在本地存储或cookie中存储时,它都会被编码 因此,从本地存储中检索后,您可以使用 变量=decodeURI(从LocalStorage检索)
然后在你的路线中使用这个变量这个问题很难解释(对不起!)。当应用程序从外部身份验证步骤(通过Auth0)返回后首次加载时,我丢失了查询参数 完整的URL被保存到浏览器的本地存储中,但我无法实现导航到正确的角度路线和保留原始查询参数的理想组合 在我的身份验证服务中,硬编码查询参数的处理被证明是不灵活和繁琐的 最后,我通过组合使用
NavigationEvent
设置和使用navigateByUrl()
场景非常具体。。。图片从书签或单独的系统加载一个复杂的URL,该系统可以“深度链接”到Angular应用程序。谢谢您的提示。在从本地存储读取时,我确保了
decodeURI()
在其中,在将其保存到本地存储时,我也使用了encodeURI()
。因此问题归结为:如何导航到包含URL参数的URL
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);
}