From 7161c6f19114b8c675d7756312e453238e7598fa Mon Sep 17 00:00:00 2001
From: Junya Kono <junya03dance@gmail.com>
Date: Fri, 17 Aug 2018 14:49:06 +0900
Subject: [PATCH] Add JWT example source code (#3746)

* Add JWT exmaple source code

* add sample code

* [fix] eslint

* Update index.js

* [fix] rename middleware\ / to middleware/

* Add default value for demo
---
 examples/auth-jwt/README.md                   |  3 ++
 examples/auth-jwt/middleware/authenticated.js |  6 ++++
 .../auth-jwt/middleware/notAuthenticated.js   |  6 ++++
 examples/auth-jwt/package.json                | 13 +++++++
 examples/auth-jwt/pages/login.vue             | 34 +++++++++++++++++++
 examples/auth-jwt/pages/secret.vue            |  9 +++++
 examples/auth-jwt/store/index.js              | 28 +++++++++++++++
 7 files changed, 99 insertions(+)
 create mode 100644 examples/auth-jwt/README.md
 create mode 100644 examples/auth-jwt/middleware/authenticated.js
 create mode 100644 examples/auth-jwt/middleware/notAuthenticated.js
 create mode 100644 examples/auth-jwt/package.json
 create mode 100644 examples/auth-jwt/pages/login.vue
 create mode 100644 examples/auth-jwt/pages/secret.vue
 create mode 100644 examples/auth-jwt/store/index.js

diff --git a/examples/auth-jwt/README.md b/examples/auth-jwt/README.md
new file mode 100644
index 0000000000..5780625bd0
--- /dev/null
+++ b/examples/auth-jwt/README.md
@@ -0,0 +1,3 @@
+# Auth External API (JWT) with Nuxt.js
+
+https://nuxtjs.org/examples/auth-external-jwt
diff --git a/examples/auth-jwt/middleware/authenticated.js b/examples/auth-jwt/middleware/authenticated.js
new file mode 100644
index 0000000000..2368cd8c0c
--- /dev/null
+++ b/examples/auth-jwt/middleware/authenticated.js
@@ -0,0 +1,6 @@
+export default function ({ store, redirect }) {
+  // If the user is not authenticated
+  if (!store.state.auth) {
+    return redirect('/login')
+  }
+}
diff --git a/examples/auth-jwt/middleware/notAuthenticated.js b/examples/auth-jwt/middleware/notAuthenticated.js
new file mode 100644
index 0000000000..1379dfe28c
--- /dev/null
+++ b/examples/auth-jwt/middleware/notAuthenticated.js
@@ -0,0 +1,6 @@
+export default function ({ store, redirect }) {
+  // If the user is authenticated redirect to home page
+  if (store.state.auth) {
+    return redirect('/')
+  }
+}
diff --git a/examples/auth-jwt/package.json b/examples/auth-jwt/package.json
new file mode 100644
index 0000000000..f1b96ac390
--- /dev/null
+++ b/examples/auth-jwt/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example-auth-jwt",
+  "dependencies": {
+    "cookieparser": "^0.1.0",
+    "js-cookie": "^2.2.0",
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}
\ No newline at end of file
diff --git a/examples/auth-jwt/pages/login.vue b/examples/auth-jwt/pages/login.vue
new file mode 100644
index 0000000000..d3956f597d
--- /dev/null
+++ b/examples/auth-jwt/pages/login.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="container">
+    <h1>login view</h1>
+    <div>
+      <label for="email">
+        <input id="email" type="email" value="test">
+      </label>
+      <label for="password">
+        <input id="password" type="password" value="test">
+      </label>
+      <button @click="postLogin">login</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Cookie from 'js-cookie'
+
+export default {
+  middleware: 'notAuthenticated',
+  methods: {
+    postLogin() {
+      setTimeout(() => { // we simulate the async request with timeout.
+        const auth = {
+          accessToken: 'someStringGotFromApiServiceWithAjax'
+        }
+        this.$store.commit('update', auth) // mutating to store for client rendering
+        Cookie.set('auth', auth) // saving token in cookie for server rendering
+        this.$router.push('/')
+      }, 1000)
+    }
+  }
+}
+</script>
diff --git a/examples/auth-jwt/pages/secret.vue b/examples/auth-jwt/pages/secret.vue
new file mode 100644
index 0000000000..d6b876fe7c
--- /dev/null
+++ b/examples/auth-jwt/pages/secret.vue
@@ -0,0 +1,9 @@
+<template>
+  <h1>this is secret page.</h1>
+</template>
+
+<script>
+export default {
+  middleware: 'authenticated'
+}
+</script>
diff --git a/examples/auth-jwt/store/index.js b/examples/auth-jwt/store/index.js
new file mode 100644
index 0000000000..44f3d1ad90
--- /dev/null
+++ b/examples/auth-jwt/store/index.js
@@ -0,0 +1,28 @@
+import Vuex from 'vuex'
+
+const cookieparser = process.server ? require('cookieparser') : undefined
+
+const createStore = () => {
+  return new Vuex.Store({
+    state: {
+      auth: null
+    },
+    mutations: {
+      update(state, data) {
+        state.auth = data
+      }
+    },
+    actions: {
+      nuxtServerInit({ commit }, { req }) {
+        let accessToken = null
+        if (req.headers.cookie) {
+          const parsed = cookieparser.parse(req.headers.cookie)
+          accessToken = JSON.parse(parsed.auth)
+        }
+        commit('update', accessToken)
+      }
+    }
+  })
+}
+
+export default createStore