document.referrer is always blank in angular 2

问题

I am trying two scenarios: 1. Redirection can take place from an external site to one of the pages of my site. I am trying to capture the external site name using document.referrer after this redirection, but it is empty. [ NOTE- I am redirected after Azure AD authentication.]

Within my site ( post authentication - to be clear). I redirect from one page to another . And on the next page I am trying to get previous page URL by document.referrer. But here again, it comes as blank.

Please suggest how to achieve the previous page from where the redirection to current page has occurred using angular 2 typescript.

回答1:

You could try putting the referrer in the state variable and reading back after AzureAD redirects back.

For some info on the state variable and other params you can send, checkout this doc.

回答2:

Microsoft also provide the code sample angular2-connect-rest-sample to demo calling the Microsoft Graph in Angular2.

In this code sample, we need to authentication with Azure AD first. So we can refer the code about the authentication in the Angular2.

However I got the issue like the redirect url is doesn't match when I try to login-in. After I change the code below, the code sample works well for me.

authHelper.ts

import { Injectable } from "angular2/core";
import { SvcConsts } from "../svcConsts/svcConsts";

@Injectable()
export class AuthHelper {
    //function to parse the url query string
    private parseQueryString = function(url) {
        var params = {}, queryString = url.substring(1),
        regex = /([^&=]+)=([^&]*)/g, m;
        while (m = regex.exec(queryString)) {
            params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
        }
        return params;
    }
    private params = this.parseQueryString(location.hash);
    public access_token:string = null;

    constructor() {
        //check for id_token or access_token in url
        if (this.params["id_token"] != null)
            this.getAccessToken();
        else if (this.params["access_token"] != null)
            this.access_token = this.params["access_token"];
    }
    // add this function to modify the redirect url using the base address  
    getRedrectUrl(){
        return window.location.href.substr(0,window.location.href.indexOf("#"));
    }

    login() {
        //redirect to get id_token
        window.location.href = "https://login.microsoftonline.com/" + SvcConsts.TENANT_ID + 
            "/oauth2/authorize?response_type=id_token&client_id=" + SvcConsts.CLIENT_ID + 
            "&redirect_uri=" + encodeURIComponent(this.getRedrectUrl()) + 
            "&state=SomeState&nonce=SomeNonce";
    }

    private getAccessToken() {
        //redirect to get access_token
        window.location.href = "https://login.microsoftonline.com/" + SvcConsts.TENANT_ID + 
            "/oauth2/authorize?response_type=token&client_id=" + SvcConsts.CLIENT_ID + 
            "&resource=" + SvcConsts.GRAPH_RESOURCE + 
            "&redirect_uri=" + encodeURIComponent(this.getRedrectUrl()) + 
            "&prompt=none&state=SomeState&nonce=SomeNonce";
    }
}

Please let me know if it helps.

来源：https://stackoverflow.com/questions/42497650/document-referrer-is-always-blank-in-angular-2

标签

angular

angular2-routing

azure-active-directory