Hi, I am looking for a basic way to protect certain pages with a password. If a user gets this password correct, they don’t get asked again for that session. It is for a static site (no database), and the information is not sensitive, so doesn’t need to be highly secure, just not hair-brain easy to get to! Also I am new to this so any links to tutorials would be greatly apprecaited! What method would be best in this scenario?
Thanks
I have mainly done server side Authentication/Authorization, but have worked with Vue enough to know that this is probably where you want to start.
Vue Router Navigation Guards
Thanks MindfulDev, that does look like a useful feature in Router.
I am a bit lost when it comes to the server side stuff. Is there a simple way to store a password somewhere secure in the file system, and check wether what the user entered matches? Or a plugin to help with this? I looked at this tutorial, but it assumes you have everything set up server side, which I am totally at sea with. Authentication and Protected Routes in VueJS - Chris Roberts any further pointers gratefully received.
If you are asking about storing a password securely in the client computer file system, I haven’t found one, but haven’t pursued it. I have read about using browser localStorage, but I seem to remember the pros and cons led me to not pursue it. Possibly another developer could address that.
From my experience with Java/Spring on the backend and Vue.js on the front end, the login request (username/password) is sent to the server (REST API in my case) via HTTPS. On the server, a servlet filter (in the Java world) ‘preprocesses’ the request.
The passwords are stored in a server database in encrypted form (I use bcrypt, which is popular). The filter logic encrypts the password in the request, then queries the username and encrypted password in the database to see if there is a match. If so, then the request is passed on to the router/controller logic in the server app. If no match, I send the client an HTTP 401 Forbidden status code in the response. When this status code is received by the client Vue.js app, the user is redirected to the login page.
I have used an encrypted token scheme where, when a user logs in successfully on the server, a token is created, stored in the database, and sent back to the client in the body of the response, again encrypted by HTTPS. I store the token with Vuex in the client app, so that the token can be accessed and sent back to the server with the next request via an Authorization header Bearer token. Then on the server, if a token is received, it is compared to the token stored in the database with the user info.
Based on my experience and research (which isn’t extensive) there doesn’t seem to be a ‘this is how you do Authentication/Authorization’ one size answer. I know that Oauth2 seems to be popular (sign in with Google), but I haven’t implemented it at this point. I also get the impression that JWT (JSON Web Tokens) are popular, but haven’t worked with those either.
Not sure if you really wanted to know all this, or are just interested in a purely client side Authentication/Authorization scheme. But it was a good exercise for me to write it out, and maybe it helps. I’m not aware of any purely client side security schemes/techniques.
Given all of the options and that security seems to be a moving target, I’m sure other developers will have their opinions and preferences based on their experiences.
that’s really helpful, thanks for explaining. Am trying to get started so that type of info is much appreciated! I am thinking of, as I don’t have a database, creating a fake api which just stores the password and accessing it through JWT, or something similar but these are all helpful pointers so thank you