Merge pull request #88 from Nekoya3/feature/85-from-cookie-to-localstorage

CookieからPWAのstorageに変更

Author: NEKOYASAN

.gitignore

@@ -83,6 +83,7 @@ dist
 # Service worker
 sw.*
 */static/*sw.*
+*/static/swenv.*
 
 # macOS
 .DS_Store

nuxt.config.js

@@ -135,6 +135,15 @@ export default {
     APPID: process.env.APPID,
     MEASUREMENTID: process.env.MEASUREMENTID
   },
+  workbox: {
+    importScripts: [
+      'https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js',
+      'https://www.gstatic.com/firebasejs/7.14.6/firebase-auth.js',
+      'swenv.js',
+      'sw-firebase-auth.js'
+    ],
+    dev: process.env.MODE !== 'production'
+  },
   /*
    ** Build configuration
    */

package.json

@@ -6,7 +6,8 @@
   "private": true,
   "scripts": {
     "dev": "cross-env NODE_ENV=development nuxt-ts",
-    "build": "nuxt-ts build",
+    "build": "yarn prebuild && nuxt-ts build",
+    "prebuild": "cross-env NODE_ENV=development node pre_build_script/swEnvBuild.js",
     "test:unit": "jest --config jest.config.js",
     "start": "cross-env NODE_ENV=production nuxt-ts",
     "generate": "nuxt-ts generate",
@@ -36,14 +37,15 @@
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/pwa": "^3.0.0-0",
     "@types/js-cookie": "^2.2.6",
+    "@types/jwt-decode": "^2.2.1",
     "@types/node": "^14.0.5",
     "cookieparser": "^0.1.0",
     "core-js": "3.6.5",
     "cross-env": "^7.0.2",
     "date-fns": "^2.14.0",
     "dayjs": "^1.8.26",
     "express": "^4.17.1",
-    "firebase": "^7.14.3",
+    "firebase": "7.14.6",
     "firebase-admin": "^8.12.0",
     "js-cookie": "^2.2.1",
     "jwt-decode": "^2.2.0",

pre_build_script/swEnvBuild.js

@@ -0,0 +1,19 @@
+const fs = require('fs')
+const environment = process.env.NODE_ENV || 'development'
+require('dotenv').config({ path: `./src/.env.${environment}` })
+
+fs.writeFileSync(
+  './src/static/swenv.js',
+  `
+const swEnv = {
+  apiKey: '${process.env.APIKEY}',
+  authDomain: '${process.env.AUTHDOMAIN}',
+  databaseURL: '${process.env.DATABASEURL}',
+  projectId: '${process.env.PROJECTID}',
+  storageBucket: '${process.env.STORAGEBUCKET}',
+  messagingSenderId: '${process.env.MESSAGINGSENDERID}',
+  appId: '${process.env.APPID}',
+  measurementId: '${process.env.MEASUREMENTID}'
+}
+`
+)

src/helpers/index.js

@@ -1,22 +1,9 @@
 import { Middleware } from '@nuxt/types'
+import { vxm } from '@/store'
 
-const authenticated: Middleware = async ({ req, redirect }) => {
-  if (process.server) {
-    // @todo dynamic import で実装する
-    const admin = require('firebase-admin')
-    const cookieparser = require('cookieparser')
-    if (req.headers.cookie) {
-      const token = cookieparser.parse(req.headers.cookie).__session
-      admin
-        .auth()
-        .verifyIdToken(token)
-        .then(() => {})
-        .catch(() => {
-          redirect('/account/login')
-        })
-    } else {
-      redirect('/account/login')
-    }
+const authenticated: Middleware = async ({ redirect }) => {
+  if (!vxm.user.isAuthenticated) {
+    redirect('/account/login')
   }
 }
 

src/middleware/authenticated.ts

@@ -73,10 +73,8 @@ export default Vue.extend({
       firebase
         .auth()
         .signInWithEmailAndPassword(this.email, this.password)
-        .then(_userInfo => {
-          vxm.user.login(/* _userInfo */)
-        })
         .then(() => {
+          vxm.user.login()
           this.$router.push('/edit')
         })
         .catch(error => {

src/pages/account/login.vue

@@ -1,12 +1,24 @@
 <template>
-  <h1>Editor</h1>
+  <div>
+    <h1>{{ user.uid }}</h1>
+    <h1>{{ user.email }}</h1>
+    <h1>{{ user.emailVerified }}</h1>
+    <h1>{{ user.displayName }}</h1>
+    <h1>{{ user.allowAccess }}</h1>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import { vxm } from '@/store'
 
 export default Vue.extend({
   layout: 'protected',
-  name: 'EditorIndex'
+  name: 'EditorIndex',
+  data() {
+    return {
+      user: vxm.user
+    }
+  }
 })
 </script>

src/pages/edit/index.vue

@@ -1,14 +1,13 @@
 // eslint-disable-next-line import/no-mutable-exports
-let admin = null
+let admin
 if (process.server) {
   admin = require('firebase-admin')
   if (!admin.apps.length) {
     admin.initializeApp({
       credential: admin.credential.applicationDefault(),
-      databaseURL: 'https://studyathome.firebaseio.com'
+      databaseURL: 'https://studyathome-dev.firebaseio.com'
     })
   }
 }
 
-// eslint-disable-next-line no-undef
 export default admin

src/plugins/firebase-admin.js

@@ -0,0 +1,62 @@
+firebase.initializeApp(swEnv)
+
+const getIdToken = () => {
+  return new Promise((resolve) => {
+    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
+      unsubscribe();
+      if (user) {
+        user.getIdToken().then(
+          idToken => resolve(idToken),
+          error => resolve(null)
+        );
+      } else {
+        resolve(null);
+      }
+    });
+  });
+};
+
+const getOriginFromUrl = url => {
+  const pathArray = url.split("/");
+  const protocol = pathArray[0];
+  const host = pathArray[2];
+  return protocol + "//" + host;
+};
+
+self.addEventListener("fetch", event => {
+  const requestProcessor = idToken => {
+    let req = event.request;
+    if (self.location.origin === getOriginFromUrl(event.request.url) &&
+      (self.location.protocol === "https:" || self.location.hostname === "localhost") &&
+      idToken
+    ) {
+      const headers = new Headers();
+      for (let entry of req.headers.entries()) {
+        headers.append(entry[0], entry[1]);
+      }
+      headers.append("Authorization", "Bearer " + idToken);
+      try {
+        req = new Request(req.url, {
+          method: req.method,
+          headers: headers,
+          mode: "same-origin",
+          credentials: req.credentials,
+          cache: req.cache,
+          redirect: req.redirect,
+          referrer: req.referrer,
+          body: req.body,
+          bodyUsed: req.bodyUsed,
+          context: req.context
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    return fetch(req);
+  };
+  event.respondWith(getIdToken().then(requestProcessor, requestProcessor));
+});
+
+self.addEventListener("activate", event => {
+  event.waitUntil(clients.claim());
+});