iron-ajax with basic auth not working

Question

I'm trying to make a request from my polymer frontend to my java-jersey backend using iron-ajax, but can't seem to work out a way to do basic auth without hardcoding it as an attribute. I don't know where to write the header-making method so that it gets used by the iron-ajax. I tried putting it both inside and outside Polymer({}) and still it doesn't get called. Here's my code. Please help. Thanks.

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

    <dom-module id="activity-feed">
        <style is="custom-style" include="iron-flex iron-flex-alignment">
            .cont{ height:90vh; overflow: auto;}
    core-list .row{height: 80px;padding: 16px}
        </style>
        <template>
        <div class="cont">
            <iron-ajax
            auto
            url="http://localhost:8080/tip/webapi/home"
            handle-as="json"
            method="GET"
            headers='{"Authorization": {{makeheaders(gi,tanu)}}}'
            last-response="{{gogo}}"
            ></iron-ajax>
            <div>{{gogo.id}}</div>              
            </div>
        </template>
    </dom-module>
    <script>
        Polymer({
            is : "activity-feed",
            makeheaders: function(user,pass){
                console.log('ceva tot se intampla');
            },
        });
        function makeheaders(user, pass) {
            console.log('merge functia');
            return "Basic " + btoa(user + ":" + pass);
        }
    </script>

Answer 1

Your iron-ajax element is set to "auto" which kicksoff the api request at startup. You could remove the auto attribute, and define an combined observer for user and pass to calculate the header, then manually send the request:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="activity-feed">
    <style is="custom-style" include="iron-flex iron-flex-alignment">
        .cont{ height:90vh; overflow: auto;}
core-list .row{height: 80px;padding: 16px}
    </style>
    <template>
    <div class="cont" >
        <iron-ajax
        id="xhr"
        url="http://localhost:8080/tip/webapi/home"
        handle-as="json"
        method="GET"
        headers='[[headers]]'
        last-response="{{gogo}}"
        ></iron-ajax>
        <div>{{gogo.id}}</div>
        </div>
    </template>
</dom-module>
<script>
    Polymer({
        is : "activity-feed",

        properties: {
            headers: {
                type: Object,
                value: function() { return {}; }
            },
            user: String,
            pass: String
        },

        makeHeaders: function(user,pass){
            return "Basic " + window.btoa(user + ":" + pass);
        },

        observers: ['_setBasicAuth(user, pass)'],

        _setBasicAuth(user, pass){
            // might be needed
            this.headers['X-Requested-With'] = "XMLHttpRequest";
            // this sets your Auth header
            this.headers['Authorization'] = this.makeHeaders(user, pass);
            this.$.xhr.generateRequest();
        }

    });

</script>