How to store an authorized user on the frontend?

Question

JSON Web Token

Good afternoon!
A question of understanding, I'm struggling with the logic of how to do it right,
and how others do it right :)

I have a node.js server that generates a JWT token and passes it to the frontend in cookies with the httpOnly flag (I have vue).
for example like this:

res.cookie('AuthToken', authToken, { httpOnly: true, secure: true })

accordingly, there is no access to the "AuthToken" token on VUE from js.

On the backend, the token is accepted as follows (since it is no longer possible to pass it in the axios request in the headers (or I don’t know how?):
req.cookies['AuthToken']
At this stage, everything works.

the point is:
I created the token, exchange it with the frontend and backend,
but where and how to store it myself user data (login, some info about the user)?
i.e. I can’t parse the JWT body on vue,
the thought comes to separately transfer another cookie "AuthToken_2"
from the backend like this

res.cookie('AuthToken_2', JSON.stringify(user), { httpOnly: false})

and at the front, take login and info from it.

Now on middleware on node.js I send AuthToken and AuthToken_2 in cookies in every request.
Those. each time the server is contacted, this token is updated in cookies (the idea is to always check it for relevance (well, like, what if it is banned?)).

I can’t figure out how to take the current one every time in VUE (I have a SPA) AuthToken_2?

PS I thought to connect vuex and act like this:
in header.vue:

computed: {
    reversedMessage: function () {
      return  this.$store.state.count
    } 
},

and in VUE router like this:

router.beforeEach( async (to, from, next) => {
  store.getters.doneTodos
  next()
})

vuex like this

getters: {
    doneTodos (state) {
      return state.count = Cookies.get('AuthToken_2')
    }
 }

as I understand it, getters initiates an update of the <co>count value

and everything supposedly works, only with a "lag on the page". that is, the cookies themselves do not arrive instantly, and at the moment of transition along the route, it still takes the old value.
ps Of course, I'm not sure that this AuthToken_2 (login, some kind of info about the user) will change often, but nevertheless.

I want to consult, maybe my approach is generally terrible :(

Huge thanks to those who understand me will chew the logic of how to

Answer 1

It is logical that when sending a token, you can add another jison in which there will be user Settings, save them to the store and then take them from them. Or, after receiving the token, you redirect to the user profile, get the information there and save it, and optionally redirect to the page from which the login was made.

Answer 2

a separate route to get the user.
those. authentication, then data request. data in localStorage. do not forget that this data cannot be particularly trusted later, and during operations it is necessary to check their validity on the back.