FIX: AuthのCookie上の維持

Author: NEKOYASAN

src/helpers/index.js

@@ -18,6 +18,5 @@ export function getUserFromCookie(req) {
 }
 
 export function getUserFromSession(req) {
-  console.log('[CHECK-AUTH] - checking if user is stored in session')
   return req.session ? req.session.userId : null
 }

src/layouts/protected.vue

@@ -56,6 +56,14 @@
 import { mapActions } from 'vuex'
 export default {
   middleware: 'authenticated',
+  data() {
+    return {
+      loading: true,
+    }
+  },
+  mounted() {
+    this.loading = false
+  },
   methods: {
     ...mapActions('modules/user', ['logout']),
     async signout() {
@@ -68,14 +76,6 @@ export default {
       // })
     },
   },
-  data() {
-    return {
-      loading: true,
-    }
-  },
-  mounted() {
-    this.loading = false
-  },
 }
 </script>
 

src/middleware/authenticated.js

@@ -1,16 +1,5 @@
-import firebase from '@/plugins/firebase'
-
-export default function ({ store, route, redirect }) {
-  firebase.auth().onAuthStateChanged((user) => {
-    if (!user) {
-      redirect('/account/login')
-    } else {
-      store.commit('user/setUser', {
-        uid: user.uid,
-        email: user.email,
-        username: user.displayName,
-        userImage: user.photoURL,
-      })
-    }
-  })
+export default function ({ store, redirect }) {
+  if (!store.getters['modules/user/isAuthenticated']) {
+    return redirect('/account/login')
+  }
 }

src/pages/account/login.vue

@@ -46,6 +46,7 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 import firebase from '@/plugins/firebase'
 export default {
   data() {
@@ -56,11 +57,13 @@ export default {
     }
   },
   methods: {
-    doLogin() {
-      firebase
+    ...mapActions('modules/user', ['login']),
+    async doLogin() {
+      await firebase
         .auth()
         .signInWithEmailAndPassword(this.email, this.password)
         .then((user) => {
+          this.login(user)
           this.$router.push('/edit')
         })
         .catch((error) => {

src/pages/account/signup.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <v-container fluid fill-height>
+      <v-layout align-center justify-center>
+        <v-flex xs12 sm8 md4>
+          <v-card>
+            <v-toolbar>
+              <v-toolbar-title>Login</v-toolbar-title>
+            </v-toolbar>
+            <v-card-text>
+              <v-form>
+                <v-text-field
+                  v-model="email"
+                  :counter="32"
+                  label="email"
+                  prepend-icon="mdi-email"
+                />
+                <v-text-field
+                  v-model="password"
+                  :append-icon="
+                    show_password ? 'mdi-visibility' : 'mdi-visibility_off'
+                  "
+                  :type="show_password ? 'text' : 'password'"
+                  :counter="32"
+                  label="password"
+                  prepend-icon="mdi-lock"
+                  @click:append="show_password = !show_password"
+                />
+              </v-form>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn @click="gotoSignin">Login</v-btn>
+              <v-spacer />
+              <v-btn @click="doSignin">Signin</v-btn>
+            </v-card-actions>
+            <hr />
+            <v-spacer />
+            <v-btn @click="gotoResetPassword"
+              >パスワードを忘れたかたはこちら</v-btn
+            >
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import firebase from '@/plugins/firebase'
+export default {
+  data() {
+    return {
+      email: '',
+      password: '',
+      show_password: false,
+    }
+  },
+  methods: {
+    ...mapActions('modules/user', ['login']),
+    async doLogin() {
+      await firebase
+        .auth()
+        .createUserWithEmailAndPassword(this.email, this.password)
+        .then((user) => {
+          this.login({
+            uid: user.uid,
+            email: user.email,
+            username: user.displayName,
+            userImage: user.photoURL,
+          })
+          this.writeUserData(user.uid, user.email)
+          this.$router.push('/edit')
+        })
+        .catch((error) => {
+          alert(error)
+        })
+    },
+    gotoSignin() {
+      this.$router.push('/signin')
+    },
+    gotoResetPassword() {
+      this.$router.push('/reset-password')
+    },
+    writeUserData(userId, email) {
+      return firebase.firestore().collection('classData').doc(userId).set({
+        email,
+      })
+    },
+  },
+}
+</script>

src/pages/edit/index.vue

@@ -1,11 +1,16 @@
 <template>
-  <h1>test</h1>
+  <h1>{{ uid }}</h1>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   layout: 'protected',
   name: 'IndexVue',
+  computed: {
+    ...mapGetters('modules/user', ['uid']),
+  },
 }
 </script>
 

src/store/index.js

@@ -11,7 +11,7 @@ export const actions = {
     const classData = classDataSnapshot.data()
     await dispatch('modules/class/setClassData', { classData })
     if (user) {
-      await dispatch('modules/user/setUSER', {
+      await dispatch('modules/user/setUser', {
         name: user.name,
         email: user.email,
         avatar: user.picture,

src/store/modules/class.js

@@ -1,21 +1,31 @@
 export const state = () => ({
+  classId: '',
   classData: {},
 })
 
 export const getters = {
   classData(state) {
     return state.classData
   },
+  classId(state) {
+    return state.classId
+  },
 }
 
 export const mutations = {
   setClassData(state, classData) {
     state.classData = classData
   },
+  setClassId(state, classId) {
+    state.classId = classId
+  },
 }
 
 export const actions = {
   setClassData({ commit }, classData) {
     commit('setClassData', classData)
   },
+  setClassId({ commit }, classId) {
+    commit('setClassId', classId)
+  },
 }

src/store/modules/user.js

@@ -1,6 +1,10 @@
+import Cookies from 'js-cookie'
+import firebase from '@/plugins/firebase.js'
+
 export const state = () => ({
   user: null,
   info: null,
+  uid: null,
 })
 
 export const mutations = {
@@ -11,6 +15,13 @@ export const mutations = {
       state.user = null
     }
   },
+  saveUid(state, payload) {
+    if (payload) {
+      state.uid = payload
+    } else {
+      state.uid = null
+    }
+  },
   setInfo(state, payload) {
     if (payload) {
       state.info = payload
@@ -21,9 +32,34 @@ export const mutations = {
 }
 
 export const actions = {
+  async login({ dispatch, state }, user) {
+    console.log('userlogin')
+    const token = await firebase.auth().currentUser.getIdToken(true)
+    const userInfo = {
+      name: user.displayName,
+      email: user.email,
+      avatar: user.photoURL,
+      uid: user.uid,
+    }
+
+    Cookies.set('access_token', token) // saving token in cookie for server rendering
+    await dispatch('setUser', userInfo)
+    await dispatch('saveUid', userInfo.uid)
+  },
+
+  async logout({ commit }) {
+    await firebase.auth().signOut()
+
+    Cookies.remove('access_token')
+    commit('setUser', null)
+    commit('saveUid', null)
+  },
   setUser({ commit }, payload) {
     commit('setUser', payload)
   },
+  saveUid({ commit }, payload) {
+    commit('saveUid', payload)
+  },
   setInfo({ commit }, payload) {
     commit('setInfo', payload)
   },
@@ -36,4 +72,10 @@ export const getters = {
   info: (state) => {
     return state.info
   },
+  uid: (state) => {
+    return state.uid
+  },
+  isAuthenticated: (state) => {
+    return !!state.user && !!state.user.uid
+  },
 }