[Vuejs]-Why can't I pass my user_name value into my component? (Auth)

by

0👍

✅

Because getProfile returns nothing (undefined). I see you use es6 then you can use async functions

//config details taken from OAUTH JS doc: https://github.com/andreassolberg/jso

import { JSO, Fetcher } from 'jso';

const client = new JSO({
  providerID: '<my-provider>',
  default_lifetime: 1800,
  client_id: '<my-client-id>',
  redirect_uri: 'http://localhost:8080/',
  authorization:'<my-auth-server>/oauth/authorize'
  //scopes: { request: ['https://www.googleapis.com/auth/userinfo.profile'] }
});

export default {
  getProfile() {
  // JSO plugin provides a simple wrapper around the fetch API to handle headers
  let f = new Fetcher(client);
  let url = 'https://www.googleapis.com/auth/userinfo.profile';
  return f.fetch(url, {}) // return promise here
    .then(data => {
      return data.json();
    })
    .then(data => {
      return data.user_name;
    })
    .catch(err => {
      console.error('Error from fetcher', err);
    });
  }
};

And

import AuthService from "@/AuthService";
export default {
  name: "MainNav",
  data() {
    return {
      name: ""
    };
  },
  async created() {
    try {
      this.name = await AuthService.getProfile();
    } catch(error) {
      // handle
    }
  }
};
</script>

Or without async (add one more then)

import AuthService from "@/AuthService";
export default {
  name: "MainNav",
  data() {
    return {
      name: ""
    };
  },
  created() {
    AuthService.getProfile().then((userName) => this.name = userName))
      .catch((error) => { /* handle */ })
  }
};
</script>

Leave a comment