We can continue implementing another essential thing for our client and it is authentication and route handling. Our goals for this lesson are:
- Page that the registered user will be redirected to
- Save the token to localStorage
- Allow user to log out
- Protect routes that only authenticated or guest users can see
View for only authorized users
It is already known that in the future we will want to allow users edit vehicles, so let's create the src/views/Vehicles/IndexView.vue component as a placeholder with the following content:...
Thank you !
Hi i would like to know what are the other approaches or best practises to save the access token beside the local storage, if we are considering the security of the token, ? Thank you
The thing with FE based tokens is - they can't be 100% secure. No matter what you do, they can still be accessed/read in various ways. That's just the nature of FE side.
Now, what options you have? There is a couple, but two are most common:
But to be fair, the biggest thing is - not the cookie storage itself, but securing it's usage. For example - if you store it in the most secure way possible, but someone still reads it and uses it - it wasn't secure. Or if your token never expires - that's another security issue.
So for that reason, I would recommend you to rotate the token on each login (never reuse it), keep it alive for a short period of time and always check for validation. On top, you can work with keeping browser/ip information that you get - to make sure it's not used elsewhere.
That said - there is a lot of resources available for this, with various arguments for/against any method. And it depends on your use case too (since mobile apps for API work differently than SPA applications). So research here is required to find the "best fit" (mind you, not the best solution, since that seems to be opinionated) :)