How to access request header with Angular2?

Question

ON my golang backend after a success oauth2 request for facebook I redirect whe user to my app's dashboard like so:

w.Header().Set("Authorization", fmt.Sprintf("Bearer %s", tokenString))
http.Redirect(w, r, "http://" + r.Host + "/dashboard?jwt=" + tokenString, http.StatusFound)

Then on the dashboard initialization I do somenthing like:

params:RouteParams;


constructor(private _router:Router, private _jwt:JWTService, private _params:RouteParams, private location:Location) {
    this.params = _params;


}


consol() {
    var redirect_url = encodeURIComponent("http://localhost:9000/api/facebook/");
    var url = "https://www.facebook.com/dialog/oauth?client_id=xxxx&redirect_uri="+ redirect_url + "&response_type=code&scope=email+user_location+user_about_me"
    window.location.href=url;
}

ngOnInit() {
    this.token = '';
    console.log(this.params);
    if (this.params.params['jwt'] != null) {
        console.log(this.params);
        localStorage.setItem('jwt', this.params.params['jwt']);
        this.location.replaceState('/dashboard')
    }
    this.Bouncer();
}

I want to avoid making my url dirty, not even for a few seconds. I wish I could inspect the request headers, because I am sending the jwt through that as well.

Updated

The original request is done through a angular2-material button

 <div md-raised-button color="warn" (click)="consol()">Login to FACEBOOK</div>

if it's the headers of the first request (the one that opens your page) you are looking for you won't be able to find them. See this issue here for more info. http://stackoverflow.com/questions/220231/accessing-the-web-pages-http-headers-in-javascript — toskv, Apr 16 '16 at 17:42
i want the header from the redirect I have just issued. Is this the same? @toskv — CESCO, Apr 16 '16 at 17:44
is the request being redirected done via javascript or the browser? — toskv, Apr 16 '16 at 17:47
The backend redirects a request, where that request comes from matters. If the request is from the browser (navigation by user for example) then you can't access it. If it's from js you might be able to. Looking at the TypeScript code though it looks it's the request that starts up your application, thus it is not possible to access it's headers. — toskv, Apr 16 '16 at 17:51
got you. will update my question. but I do it with angular2 too. — CESCO, Apr 16 '16 at 17:53
the thing is, you need to have an ajax request to be able to access the response headers, if it's done by the browser it's just not possible. — toskv, Apr 16 '16 at 17:54
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109335/discussion-between-cesco-and-toskv). — CESCO, Apr 16 '16 at 17:56

score 1 · Answer 1 · edited May 23 '17 at 10:30

First I create a pop up window/tab.

    var url = "https://accounts.google.com/o/oauth2/auth?client_id="
                    + clientid + "&redirect_uri="
                    + redirect_url + "&response_type=code&scope="
                    + scope;
    window.open(url);

This goes to google and hit my server on the way back,at the redirect url. Which serves the script tag below inside this popup. It actually just run a command on the windows that created this popup , in this case my SPA, with my application token as a parameter and then closes it.

w.Write([]byte(`
                    <script>
                        var token="` + token + `";
                        function CloseMySelf() {
                            try {
                                window.opener.angularComponentRef.runThisFunctionFromOutside(token);
                            }
                            catch (err) {}
                            window.close();
                            return false;
                        }
                        CloseMySelf();
                    </script>

    `))

This is the function that it call. This method needs to be made public like this question shows.

runThisFunctionFromOutside(token) {
    localStorage.setItem('jwt', token);
    location.href = "../dashboard";
}

How to access request header with Angular2?

Updated

1 Answers1