Finish auth-routes example

This commit is contained in:
Sébastien Chopin 2016-12-07 19:23:08 +01:00
parent c5ac12b2cb
commit 15e066b060
3 changed files with 36 additions and 11 deletions

View File

@ -47,10 +47,11 @@ app.post('/api/logout', function (req, res) {
}) })
// We instantiate Nuxt.js with the options // We instantiate Nuxt.js with the options
new Nuxt({ const isProd = process.env.NODE_ENV === 'production'
dev: process.env.NODE_ENV !== 'production' const nuxt = new Nuxt({ dev: !isProd })
}) // No build in production
.then((nuxt) => { const promise = (isProd ? Promise.resolve() : nuxt.build())
promise.then(() => {
app.use(nuxt.render) app.use(nuxt.render)
app.listen(3000) app.listen(3000)
console.log('Server is listening on http://localhost:3000') console.log('Server is listening on http://localhost:3000')
@ -173,4 +174,29 @@ logout ({ commit }) {
## Pages components ## Pages components
Then we can use the `$store.state.authUser` data to check if the user is connected in our application. Then we can use `$store.state.authUser` in our pages components to check if the user is connected in our application or not.
### Redirect user if not connected
Let's add a `/secret` route where only the connected user can see its content:
```html
<template>
<div>
<h1>Super secret page</h1>
<router-link to="/">Back to the home page</router-link>
</div>
</template>
<script>
export default {
// we use fetch() because we do not need to set data to this component
fetch ({ store, redirect }) {
if (!store.state.authUser) {
return redirect('/')
}
}
}
</script>
```
We can see in the `fetch` method that we call `redirect('/')` when our user is not connected.

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<h1>Super secret page</h1> <h1>Super secret page</h1>
<p>If you try to access this URL not conntected, you will be redirected to the home page (server-side or client-side)</p> <p>If you try to access this URL not connected, you will be redirected to the home page (server-side or client-side)</p>
<router-link to="/">Back to the home page</router-link> <router-link to="/">Back to the home page</router-link>
</div> </div>
</template> </template>

View File

@ -31,11 +31,10 @@ app.post('/api/logout', function (req, res) {
// We instantiate Nuxt.js with the options // We instantiate Nuxt.js with the options
const isProd = process.env.NODE_ENV === 'production' const isProd = process.env.NODE_ENV === 'production'
new Nuxt({ const nuxt = new Nuxt({ dev: !isProd })
dev: !isProd, // No build in production
_build: !isProd const promise = (isProd ? Promise.resolve() : nuxt.build())
}) promise.then(() => {
.then((nuxt) => {
app.use(nuxt.render) app.use(nuxt.render)
app.listen(3000) app.listen(3000)
console.log('Server is listening on http://localhost:3000') console.log('Server is listening on http://localhost:3000')