Add auth-routes examples (WIP)

examples/auth-routes/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "auth-routes",
+  "description": "",
+  "dependencies": {
+    "body-parser": "^1.15.2",
+    "cookie-session": "^2.0.0-alpha.2",
+    "express": "^4.14.0",
+    "nuxt": "latest",
+    "whatwg-fetch": "^2.0.1"
+  },
+  "scripts": {
+    "start": "node server.js"
+  }
+}

examples/auth-routes/pages/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="container">
+    <h1>Please login to see the secret content</h1>
+    <form v-if="!authUser" @submit.prevent="login">
+      <p class="error" v-if="formError">{{ formError }}</p>
+      <p><i>To login, use <b>demo</b> as username and <b>demo</b> as password.</i></p>
+      <p>Username: <input type="text" v-model="formUsername" name="username" /></p>
+      <p>Password: <input type="password" v-model="formPassword" name="password" /></p>
+      <button type="submit">Login</button>
+    </form>
+    <div v-else>
+      Hello {{ authUser.username }}!
+      <pre>I am the secret content, I am shown only when the use is connected.</pre>
+    </div>
+  </div>
+</template>
+
+<script>
+// Polyfill for window.fetch()
+require('whatwg-fetch')
+
+export default {
+  data ({ req }) {
+    console.log(req && req.session)
+    return {
+      authUser: (req && req.session.authUser) || null,
+      formError: null,
+      formUsername: '',
+      formPassword: ''
+    }
+  },
+  methods: {
+    login () {
+      fetch('/api/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          username: this.formUsername,
+          password: this.formPassword
+        })
+      })
+      .then((res) => {
+        if (res.status === 401) {
+          this.formError = 'Bad credentials'
+        } else {
+          return res.json()
+        }
+      })
+      .then((authUser) => {
+        this.authUser = authUser
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  padding: 100px;
+}
+.error {
+  color: red;
+}
+</style>

examples/auth-routes/server.js

@@ -0,0 +1,50 @@
+const Nuxt = require('nuxt')
+const bodyParser = require('body-parser')
+const cookieSession = require('cookie-session')
+const app = require('express')()
+
+// Body parser, to access req.body
+app.use(bodyParser.json())
+
+// Sessions with cookies to have req.session
+app.use(cookieSession({
+  name: 'nuxt-session',
+  keys: ['nuxt-key-1', 'nuxt-key-2'],
+  maxAge: 24 * 60 * 60 * 1000 // 24 hours
+}))
+
+// POST /api/login to log in the user and add him to the req.session.authUser
+app.post('/api/login', function (req, res) {
+  if (req.body.username === 'demo' && req.body.password === 'demo') {
+    req.session.authUser = { username: 'demo' }
+    return res.json({ username: 'demo' })
+  }
+  res.status(401).json({ error: 'Bad credentials' })
+})
+
+app.use(function (req, res, next) {
+  req.session.views = (req.session.views || 0) + 1
+  next()
+})
+
+app.all('/', function (req, res) {
+  console.log(req.session)
+  res.send('Hello')
+})
+
+new Nuxt()
+.then((nuxt) => {
+  app.use(nuxt.render)
+  // app.use(function (req, res) {
+  //   nuxt.render(req, res)
+  // })
+  // .then((stream) => {
+  //   stream.pipe(fs.createFile)
+  // })
+  app.listen(3000)
+  console.log('Server is listening on http://localhost:3000')
+})
+.catch((error) => {
+  console.error(error)
+  process.exit(1)
+})

examples/custom-routes/nuxt.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   router: {
     routes: [
-      { name: 'user', path: '/users/:id(\\d+)', component: 'pages/_user' }
+      { path: '/users/:id(\\d+)', component: 'pages/_user' }
     ]
   },
   build: {