How to check if a user is logged in to a Vue app?

Question

JavaScript

Guys, hello everyone.
I am making an application and faced the following task:
Let's say there is a menu item "Profile"
, there are two views of this page:

{ path: '/profile', component: ProfileViewsPage, children: [
        { path: '', component: LoginPage },
        { path: '', component: ProfilePage }

LoginPage - page of authorization (registration)
ProfilePage - page of the authorized user with his data
How to check whether the user is authorized in the application or not?
and, depending on the answer, issue one or another representation.
I suspect that this should be done using the beforeEnter tool in path: '/profile', component: ProfileViewsPage
Guys, help me.

Answer 1

It seems to me that you have not quite the right approach, what if you have many paths that require authorization? One of the options to add information to the router requires this authorization page or not:

{ path: '/profile', component: ProfilePage requiresAuth: true,
{ path: '/login', component: LoginPageб requiresAuth: false }

Information that the user is authorized or not should be stored, for example, in localStorage.
Next, in beforeEnter, check for the page to which the transition is made, whether authorization is required for it. If yes, then we look in localStorage, check if the user is authorized, if yes, then go to the page, if not, then send him to the authorization page. After successful authorization, we save that the user is authorized in localStorage.
Additional conditions will also be added when you have a bad token that you use to communicate with the backend.

Answer 2

I did a bit unscientific: just globally v-if="auth" shows the content, and v-if="!auth" shows the login form. Then, when clicking on a link (for example, sent via Skype) to a specific closed page, the user receives an authorization window, and upon successful login, he immediately gets to the desired page, and there is no need to remember anywhere where to redirect. Naturally, on the server side it also checks whether the user is logged in or not.

Answer 3

Start a state , when loading the page, write the user data there (immediately when the page is returned or through a separate request) and then check wherever necessary in any way.
or
Use api token when making requests to the backend. And also, if necessary, get a full profile from the backend (access rights, etc.) and further as in the first option.
Well, ideally, both options should be periodically checked through the backend for rottenness.
In general, as you like within the application, one option is not correct.
Here is an example with "global service" authorization