A simple module used to password protect your pages or your entire website.
- Require a password to access a page
- Require a password to access the entire website
- Full control over the password page
Your passwords can be stored as an environment variable or hardcoded in your source files.
Module initialisation in nuxt.config.js
module.exports = {
modules: ['nuxt-password-protect'],
passwordProtect: {
formPath: '/password',
password: 'hello-world',
tokenSeed: 0101010,
queryString: '_pw',
cookieName: '_password'
cookie: {
prefix: '',
expires: 5
}
}
}
With the options you can define the basics of your website protection.
export default {
name: 'MyComponent',
middleware: ['password-protect']
}
Add the middle ware to your nuxt configuration file
module.exports = {
router: {
middleware: ['password-protect']
}
}
We provide three methods you can use on your password form page, these will either add or remove authorisation or check if a user is authorised.
You can access these methods using the context of your vue component.
this.$passwordProtect.authorise(password)
This method will create a cookie with a unique cookie if the user has entered the correct password.
this.$passwordProtect.isAuthorised()
Is the user authorised to view this content, this will return a boolean depending.
this.$passwordProtect.removeAuthorisation()
Removes the users authorisation.
We also support granting authorisation using a querystring, by default the query string is _pw
.
So to attempt to authorise you can do https://mywebsite.com?_pw=password
The query string can be changed by the protect password options in your nuxt config file.