Vue Authentication best practice.

@eng.helewa Maybe look at putting a “loading” state in your components.

When a component is mounted, show the loading state whilst checking the access token and then display the appropriate component (error or dashboard) depending on if the token is valid or not.

Thanks for you response @martinbean. Actually I am hiding my app until checking the token, then it will show up. But I need something more powerful. You know at any time during the loading and before redirecting the user you can hit the Escape button, open the dev-tools and start playing with the protected area of the application.

at any time during the loading and before redirecting the user you can hit the Escape button, open the dev-tools and start playing with the protected area of the application.

@eng.helewa Then make sure you’re not displaying anything sensitive, and authorising all API calls. You should be fetching data via API endpoints, too.

Then make sure you’er not displaying anything sensitive, and authorising all API calls. You should be fetching data via API endpoints, too.

@martinbean That's what I'm doing but the whole process is not convincing for people who came from regular authentication process.

It's very good what I have achieved so far but I'm still looking for the best practice to make this experience not less than the regular login experience.

@eng.helewa We can’t really suggest what to do as we don’t know how you’ve developed your application, and how much you’ve “Vue-ified” it.

When developing components, I’ll have them responsible for fetching the data they need to display and then render the data when ready.

I’d suggest reading the Passport documentation, as that covers authenticating requests from the front-end. There may be something in there you can use as inspiration/a basis for your own implementation.