authorization headers not working

[kyoukhana]

If I set a common header it isn't working for some reason here is the code below.

this.axios.defaults.headers.common['Authorization'] = 'bearer:'+atoken;

Here is the update user method

   updateUser: function(user) {
                var _this=this;
                var atoken = this.$auth.token();

                this.axios.defaults.headers.common['Authorization'] = 'bearer:'+atoken;

                this.axios.post('api/users/updateprofile', user)
                    .then(function (response) {

                        var data=response['data'];

                        // Save Message Dialog
                        _this.$refs.updateMessage.open();

                    })
                    .catch(function (error) {
                        //console.log(error);
                    });

            }

[imcvampire]

Do you try to replace this with Vue. I'm using this function and everything is fine:

const setAuthorizationHeader = token => Vue.axios.defaults.headers.common.Authorization = token ? `Bearer ${token}` : ''

[kyoukhana]

here is how i have my project set up.

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import auth from '@websanova/vue-auth'
import * as App from './components/app.vue'
import mdl from 'material-design-lite'
import VueMdl from 'vue-mdl'
import VueX from 'vuex'
import axios from 'axios'
import VueAxios from 'vue-axios'
import vdropzone from 'vue-dropzone/lib/Dropzone'

Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(VueMdl);
Vue.use(VueX);
Vue.use(VueAxios, axios);

// register custom select
Vue.component('select-c', require('./components/custom/select.vue'));

/*Register Dropzone */
Vue.component('dropzone', require('./components/custom/dropzone.vue'))

Vue.router = new VueRouter; /*Must be declared before using vue auth */

/*vue-jwt-auth options */
var options = {
    token: [{request: 'token', response: 'token', authType: 'bearer', foundIn: 'header'}],
    tokenName:'token',
    loginData: {url: 'api/auth', method: 'POST'},
    logoutData: {url: 'api/logout', method: 'POST', redirect: '/admin/login', makeRequest: false},
    authRedirect: {path: '/admin/login'},
    fetchData: {url: 'api/account', method: 'GET' , authType: 'bearer'},
    rolesVar: 'role_id'
};

/*CRFC TOKEN For form validations for Laravel*/
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

Vue.router.map({
    '/admin/login': {
        component: (resolve) => { require(['./components/views/admin/login.vue'], resolve); }
    }

});

Vue.http.options.root="http://www.devqi.com";

Vue.use(auth,options, { router: VueRouter, http: Vue.http });

//Vue.use(auth,options);
Vue.router.start(Vue.extend(App), '#app');

[kyoukhana]

I also tried it like this

 updateUser: function(user) {
                var _this=this;
                var atoken = this.$auth.token();

                this.axios.defaults.headers.common.Authorization = token ? `Bearer ${atoken}` : ''

                this.axios.post('api/users/updateprofile', user)
                    .then(function (response) {

                        var data=response['data'];

                        // Save Message Dialog
                        _this.$refs.updateMessage.open();

                    })
                    .catch(function (error) {
                        //console.log(error);
                    });

            },

This line fires

this.axios.post('api/users/updateprofile', user)

But doesn't pass then token header

[imcvampire]

Could you give a working demo ?

[kyoukhana]

So a working demo is that this code works. But it doesn't require a token to be passed

registerUser: function(user){

                this.axios.post('/api/usr/register', user)
                .then(function (response) {

                 var data=response['data'];

                    console.log(data);

                 _this.user.referralcode=data.referralid;

                // Save Message Dialog
                _this.$refs.registerMessage.open();

                })
                .catch(function (error) {
                //console.log(error);
                });

            }

[imcvampire]

No, what I want is a full project working code. Your code given to me is too confused.

[kyoukhana]

i can give you access to the repo hang on

[kyoukhana]

When you pull the project navigate to

/resources/assets/js/components/views/users/account/profile.vue

[imcvampire]

OK. Give me some second!

[imcvampire]

Sorry! But I can't find any code using my wrapper in your file. Could you give more detail?

[kyoukhana]

So if you navigate here /resources/assets/js/components/views/users/account/profile.vue line 149

resources/assets/js/app.js your libraries are included in there

[kyoukhana]

You might have to do a pull.

[kyoukhana]

I even tried it like this

 var axiosConfig = this.axios.create({
                    timeout: 1000,
                    headers: {'Authorization': 'bearer:'+this.$auth.token()}
                });

                this.axios.post('api/users/updateprofile', user, axiosConfig)
                    .then(function (response) {

                        var data=response['data'];

                        // Save Message Dialog
                        _this.$refs.updateMessage.open();

                    })
                    .catch(function (error) {
                        //console.log(error);
                    });

[kyoukhana]

in vue-resource it works here is the code for that

  this.$http.post('api/users/updateprofile', {Authorization: 'bearer:'+token}).then(response => response.json()).then((data) => {

                    let datar=data['data'];

                    _this.$refs.updateMessage.open();

                }).catch((response) => { console.error(response); });