add api auth

Author: galvez

api.js

@@ -1,7 +1,7 @@
 import { sign, verify } from 'jsonwebtoken'
 import { json } from 'body-parser'
 import { parse } from 'cookie'
-import { addUser, authUser } from './db'
+import { addUser, authUser, getUser } from './db'
 
 const expiresIn = '90d'
 const sessionSecret = 'some truly random value'
@@ -45,6 +45,35 @@ export default [
       res.end()
     }
   },
+  (req, res, next) => {
+    if (!req.url.startsWith('/api')) {
+      return next()
+    }
+    if (!req.headers.authorization) {
+      res.statusCode = 401
+      res.end()
+      return
+    }
+    const tokenMatch = req.headers.authorization.match(/Bearer (.+)/)
+    if (tokenMatch) {
+      const jwtData = verify(tokenMatch[1], sessionSecret)
+      if (jwtData) {
+        req.email = jwtData.email
+        req.token = tokenMatch[1]
+        return next()
+      }
+    }
+    res.statusCode = 401
+    res.end()
+  },
+  {
+    path: '/api/user',
+    async handler(req, res, next) {
+      const user = await getUser(req.email)
+      res.json({ user })
+      res.end()
+    }
+  },
   (req, res, next) => {
     const cookies = req.headers.cookie || ''
     const parsedCookies = parse(cookies) || {}

db.js

@@ -33,3 +33,7 @@ export function authUser({ email, password }) {
   }
   return false
 }
+
+export function getUser(email) {
+  return db.users[email]
+}

middleware/auth.js

@@ -6,6 +6,6 @@ export default function ({ store, route, redirect, req }) {
     })
   }
   if (!store.state.user.authenticated) {
-    redirect('/register')
+    return redirect('/register')
   }
 }

nuxt.config.js

@@ -8,5 +8,6 @@ export default {
   },
   http: {
     baseURL: 'http://localhost:3030'
-  }
+  },
+  plugins: ['~/plugins/http']
 }

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    Hello, {{ user.email }}!
+    Hello, {{ user.name }}!
   </div>
 </template>
 
@@ -9,6 +9,11 @@ import { mapState } from 'vuex'
 
 export default {
   middleware: 'auth',
-  computed: mapState(['user'])
+  data: () => ({
+    user: {}
+  }),
+  async asyncData({ $http, store }) {
+    return $http.$get('api/user')
+  }
 }
 </script>

plugins/http.js

@@ -0,0 +1,8 @@
+export default function ({ $http, store }) {
+  $http.onRequest((config) => {
+    if (store.state.user.authenticated) {
+      config.headers.set('Authorization', `Bearer ${store.state.user.token}`)
+    }
+    return config
+  })
+}