세션관리기능추가(쿠키,로컬스토리지)+로그인로그아웃>js-cookie

middleware/check-auth.js

@@ -0,0 +1,21 @@
+import { getUserFromCookie, getUserFromLocalStorage } from '~/utils'
+
+export default function ({ store, req }) {
+  if (process.server && !req) {
+    return undefined
+  }
+
+  const userData = process.server ? getUserFromCookie(req) : getUserFromLocalStorage()
+
+  if (!userData) {
+    return undefined
+  } else if (!userData.jwt || Date.now() > userData.expiresIn) {
+    store.commit('clearToken')
+    store.commit('clearUser')
+  } else {
+    store.commit('setToken', userData.jwt)
+    store.commit('setUser', { email: userData.user, avatar: userData.avatar })
+    const timeToLogout = userData.expiresIn - Date.now()
+    store.dispatch('setLogoutTimer', timeToLogout)
+  }
+}

nuxt.config.js

@@ -1,6 +1,9 @@
 
 export default {
   mode: 'spa',
+  router: {
+    middleware: 'check-auth'
+  },
   /*
   ** Headers of the page
   */

package-lock.json

@@ -6922,6 +6922,11 @@
       "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",

package.json

@@ -15,6 +15,7 @@
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/proxy": "^1.3.3",
     "firebase": "^7.6.1",
+    "js-cookie": "^2.2.1",
     "md5": "^2.2.1",
     "nuxt": "^2.0.0",
     "vue-material": "^1.0.0-beta-11",

pages/index.vue

@@ -13,7 +13,7 @@
           <md-button>
             <md-avatar><img :src="user.avatar" :alt="user.email"></md-avatar>{{ user.email }}
           </md-button>
-          <md-button>
+          <md-button @click="logoutUser">
             Logout
           </md-button>
         </template>
@@ -175,6 +175,9 @@ export default {
     },
     changeCountry (country) {
       this.$store.commit('setCountry', country)
+    },
+    logoutUser () {
+      this.$store.dispatch('logoutUser')
     }
   }
 }

plugins/firestore.js

@@ -14,9 +14,7 @@ if (!firebase.apps.length) {
   }
   // Initialize Firebase
   firebase.initializeApp(firebaseConfig)
-  firebase.firestore().settings({
-    timestampsInSnapshots: true
-  })
+  firebase.firestore().settings({})
 }
 
 const db = firebase.firestore()

store/index.js

@@ -1,6 +1,7 @@
 import Vuex from 'vuex'
 import md5 from 'md5'
 import db from '~/plugins/firestore'
+import { saveUserData, clearUserData } from '~/utils'
 
 const createStore = () => {
   return new Vuex.Store({
@@ -30,7 +31,9 @@ const createStore = () => {
       },
       setUser (state, user) {
         state.user = user
-      }
+      },
+      clearToken: state => (state.token = null),
+      clearUser: state => (state.user = null)
     },
     actions: {
       async loadHeadLines ({ commit }, apiUrl) {
@@ -63,13 +66,22 @@ const createStore = () => {
             const loggedInUser = await loginRef.get()
             user = loggedInUser.data()
           }
-
+          console.log(autuUserData)
           commit('setUser', user)
           commit('setToken', autuUserData.idToken)
           commit('setLoading', false)
+          saveUserData(autuUserData, user)
         } catch (error) {
           console.log(error)
         }
+      },
+      setLogoutTimer ({ dispatch }, interval) {
+        setTimeout(() => dispatch('logoutUser'), interval)
+      },
+      logoutUser ({ commit }) {
+        commit('clearToken')
+        commit('clearUser')
+        clearUserData()
       }
     },
     getters: {

utils/index.js

@@ -0,0 +1,56 @@
+import Cookie from 'js-cookie'
+
+export const saveUserData = ({ idToken, expiresIn }, { email, avatar }) => {
+  expiresIn = 3600
+  const tokenExpiration = Date.now() + expiresIn * 1000
+  localStorage.setItem('jwt', idToken)
+  localStorage.setItem('expiresIn', tokenExpiration)
+  localStorage.setItem('user', email)
+  localStorage.setItem('avatar', avatar)
+
+  Cookie.set('jwt', idToken)
+  Cookie.set('expiresIn', tokenExpiration)
+  Cookie.set('user', email)
+  Cookie.set('avatar', avatar)
+}
+
+export const getUserFromCookie = (req) => {
+  if (!req.headers.cookie) { return undefined }
+  const jwtCookie = req.headers.cookie.split(';').find(c => c.trim().startWith('jwt='))
+  const expiresInCookie = req.headers.cookie.split(';').find(c => c.trim().startWith('expiresIn='))
+  const userCookie = req.headers.cookie.split(';').find(c => c.trim().startWith('user='))
+  const avatarCookie = req.headers.cookie.split(';').find(c => c.trim().startWith('avatar='))
+
+  if (!jwtCookie || !expiresInCookie || !userCookie || !avatarCookie) { return undefined }
+
+  const jwt = jwtCookie.split('=')[1]
+  const expiresIn = expiresInCookie.split('=')[1]
+  const user = userCookie.split('=')[1]
+  const avatar = avatarCookie.split('=')[1]
+
+  return { jwt, expiresIn, user, avatar }
+}
+
+export const getUserFromLocalStorage = () => {
+  if (localStorage) {
+    const jwt = localStorage.getItem('jwt')
+    const expiresIn = localStorage.getItem('expiresIn')
+    const user = localStorage.getItem('user')
+    const avatar = localStorage.getItem('avatar')
+
+    return { jwt, expiresIn, user, avatar }
+  }
+}
+
+export const clearUserData = () => {
+  if (!process.server) {
+    localStorage.removeItem('jwt')
+    localStorage.removeItem('expiresIn')
+    localStorage.removeItem('user')
+    localStorage.removeItem('avatar')
+  }
+  Cookie.remove('jwt')
+  Cookie.remove('expiresIn')
+  Cookie.remove('user')
+  Cookie.remove('avatar')
+}