fetchProfile.vue

<template>
  <div>
    <slot :response="response" :loading="loading"></slot>
  </div>
</template>

<script>
// require modules
const _ = require('lodash');
let host = require('../js/const').apiHost;

export default {
  name: "fetchProfile",
  data() {
    return {
      loading: true,
      response: '',
      
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
    jwt: function () {
      return this.$store.getters['User/jwt']
    },
  },
  methods: {
    async getItems() {
      const vm = this;

      // console.log(host)

      if(vm.isDev) {
        host = require('../js/const').devApiHost;
      }

      // console.log(vm.isExperimental)

      let url = `${host}/api/users/me`;
      

      const jwt = vm.jwt;
      if(jwt === null) {
        vm.loading = false;
        vm.response = null;
        return
      }

      fetch(url, {
        method: 'GET',
        mode: 'cors',
        cache: 'no-cache',
        headers: {
          Authorization: `Bearer ${jwt}`
        }
      })
        .then(response => response.json())
        .then((response) => {
          // /* eslint-disable no-console */
          //console.log(response);
          

          setTimeout(() => {
            vm.loading = false;
            vm.response = response;
            }, 10);
        });
      //   const response= await fetch(url, {
      //   method: 'GET',
      //   mode: 'cors',
      //   cache: 'no-cache',
      //   headers: {
      //     Authorization: `Bearer ${jwt}`
      //   }
      // })
      // const responseData= await response.json()
      // vm.loading = false;
      // vm.response = responseData;
            
      // let getRoleUrl= `${host}/api/users-permissions/roles/${vm.response.id}`
      // console.log("getRole url", getRoleUrl);

      // const responseRole= await fetch(getRoleUrl, {
      //   method: 'GET',
      //   mode: 'cors',
      //   cache: 'no-cache',
      //   headers: {
      //     Authorization: `Bearer ${jwt}`
      //   }
      // })
      // const responseRoleData= await responseRole.json();
      
      // console.log("role is", vm.response);
      // const roleName= responseRoleData.role.name;
      // vm.response = {...vm.response, role: roleName }
      
      
    }
  },
  mounted() {
    const vm = this
    // /* eslint-disable no-console */
    // console.log(vm.locus);
    vm.getItems();
  },
}
</script>

<style scoped>

</style>