title: How to get data inside a Promise Value in Javascript?
body: <p>I'm trying to get the role of a User in my router.js file so that I can create Vue-Router Navigation Guards.</p>
  
  <p>If the User's role is equal to candidate he can see all of the routes with this <code>requiresAuthCandidate</code> that I added to my candidate routes, in the meta field. I will then to the same thing for Employers. Right now, candidates can see employer's routes and employer's can see candidate's routes. This should not happen.</p>
  
  <p>Bascially I want to do something like this.</p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt;{
  
      if (to.meta.requiresAuthCandidate) {
          if (auth.getProfile().role === 'candidate') {
              next({
                 name: "home"
              });
          }
      } else {
          next();
      }
  
  });
  </code></pre>
  
  <p>When I <code>console.log(auth.getProfile());</code> I get a Promise and then inside a PromiseValue and then inside some data. The problem is if I try console logging the data like this <code>console.log(auth.getProfile().data);</code> I get <code>undefined</code>. Below is a screenshot of my data. Any idea why I can't access this data like normal?</p>
  
  <p><a href="https://i.stack.imgur.com/vNSRs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vNSRs.jpg" alt="enter image description here"></a></p>