Accessing encoded query params in Angular using activatedRoute

user_2866262 0
Viewed 5039

I have angular application which is loaded after redirecting from another application. I want to access query params when authentication website returns to my Angular application. The url looks like

http://localhost:4200/#/starterview?openId%3Dhttps:%2F%2Fmy.fidesque.net%2Fopenid%2Fyobtest_smeuser%26email%3Dyobtest@gml.nl%26userAuthMode%3DSP=

I want to access the query params but I am not able to do it correctly using this.activatedRoute.snapshot.queryParams I suspect that it is due to encoded params. Is there any workaround ?

regards, Venky

angular2-routing angular typescript
2 Answers

You can decode the encoded URL using decodeURIComponent as answered by Venky. If you know the query params and want to extract the value from decoded URL. Use this function:

getQueryParamFromMalformedURL(name) {
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(decodeURIComponent(this.router.url)); // or window.location.href
    if (!results) {
        return 0;
    }
    return results[1] || 0;
}

If the url is http://localhost:4200/login?username=jerry&code=1234, then

this.getQueryParamFromMalformedURL('username'); // should return 'jerry'
user_32746020

I decoded the URL using following code. Then I could extract the params correctly

const encodedUrl = 'http://localhost:4200/#/starterview?openId%3Dhttps:%2F%2Fmy.fidesque.net%2Fopenid%2Fyobtest_smeuser%26email%3Dyobtest@gml.nl%26userAuthMode%3DSP='
const decodedUrl = decodeURIComponent(encodedUrl);
console.log(decodedUrl);
user_28662620
Related