https://github.com/hcarneiro/nuxt-basic-authentication
An example project on how to use HTTP authorization in Nuxt.js
https://github.com/hcarneiro/nuxt-basic-authentication
javascript nuxtjs vuejs
Last synced: about 2 months ago
JSON representation
An example project on how to use HTTP authorization in Nuxt.js
- Host: GitHub
- URL: https://github.com/hcarneiro/nuxt-basic-authentication
- Owner: hcarneiro
- Created: 2019-05-29T16:37:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T22:58:17.000Z (over 2 years ago)
- Last Synced: 2024-05-01T16:53:01.880Z (about 1 year ago)
- Topics: javascript, nuxtjs, vuejs
- Language: JavaScript
- Size: 2.94 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt Basic Authentication
> An example project on how to use HTTP authorization in Nuxt.js
## Files to look for
**config/authentication.js**
```js
const path = require('path')
const basicAuth = require('basic-auth')
const config = require(path.resolve( __dirname, './config.json'))
const isDev = !(process.env.NODE_ENV === 'production')
const login = {
user: isDev && config ? config.AUTH_USER : process.env.AUTH_USER,
pass: isDev && config ? config.AUTH_PASS : process.env.AUTH_PASS
}
const auth = (req, res, next) => {
const user = basicAuth(req)
if (!user || !user.name || !user.pass) {
res.set('WWW-Authenticate', 'Basic realm=Authorization Required')
res.status(401).send('Authorization Required')
return
}
if (user.name === login.user && user.pass === login.pass) {
next()
} else {
res.set('WWW-Authenticate', 'Basic realm=Authorization Required')
res.status(401).send('Authorization Required')
return
}
}
module.exports = auth
```
**config/config.json**
```json
{
"AUTH_USER": "admin",
"AUTH_PASS": "secretpassword"
}
```
**server/index.js**
```js
// Authentication
app.get('/auth', auth, (req, res) => {
res.redirect('/')
})
app.get('/logout', (req, res) => {
res.set('Authorization', 'Basic xxx')
res.status(401).send('Logged out')
})
```
**store/auth.js**
```js
export const state = () => ({
authenticated: false
})
export const mutations = {
setAuthenticated(state, status) {
state.authenticated = status
}
}
export const actions = {
authenticate({ commit }, value) {
commit('setAuthenticated', value)
},
logout({ commit }) {
this.$axios.get(`/logout`)
.then(() => {
// Nothing to do here
// It should fail
})
.catch(() => {
commit('setAuthenticated', false)
})
}
}
```
**middleware/auth.js**
```js
export default function (context) {
if (!context.req) {
return
}
const CREDENTIALS_REGEXP = /^ *(?:[Bb][Aa][Ss][Ii][Cc]) +([A-Za-z0-9._~+/-]+=*) *$/
const match = CREDENTIALS_REGEXP.exec(context.req.headers.authorization)
if (!match) {
context.store.dispatch('auth/authenticate', false)
return
}
context.store.dispatch('auth/authenticate', true)
}
```
**nuxt.config.js**
```js
router: {
middleware: 'auth'
}
````
## Build Setup
``` bash
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm start
# generate static project
$ npm run generate
```
For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).