How to organize a user page?

Question

JSON Web Token

Good evening!
I wrote authorization on my site, by itself - token authorization (using Vuex ), now I'm thinking about the user's page, how to organize this page, do I need Vuex ?
As I understand it, you need to send a valid token from the front to the backend, and if this token is valid, then send all the necessary data about the user, but perhaps this approach is not correct.
Advise different ways to get user data, thanks in advance!

Answer 1

Draw an analogy, for example, with vk.com.
Vkontakte has an API.
To get our profile data, we pass a token.
For example:
You have a method https://api.site.com/account.getProfileInfo?token=... By issuing
a get request, you will get something similar.

{
"response": {
"first_name": "Кристина",
"last_name": "Шипилова",
"bdate": "20.3.1991",
"bdate_visibility": 2,
"city": {
"id": 21940,
"title": "Верхний Мамон"
},
"country": {
"id": 1,
"title": "Россия"
},
"home_town": "Воронеж В- Мамон",
"maiden_name": "",
"phone": "+7 *** *** ** 79",
"relation": 1,
"sex": 1,
"status": "ОБОЖАЮ СИРЕНЬ😎"
}
}

Next, put in the necessary tags.
Again, if we are talking about specific actions.
An example from my project, but I'm not pulling a profile, but categories.

async asyncData({$axios}) {
      let category_items = []
      let promise_category = $axios.$get(`${process.env.api}/categories.get`,
          {
            params: {
              lvl: 0,
              count: 25,
              offset: 0
            }
          })
          .then(({code, count, items}) => {
            if (code === 0) {
              items.forEach((e) => {
                category_items.push({
                  id: e.id,
                  name: e.name,
                  children: [],
                  deleted_loading: false,
                  lvl: e.lvl,
                  selected: false,
                })
              })
            }
          })

      await Promise.all([promise_category])
      return {
        category_items
      }
    },

Do you need Vuex?
You decide.