Skip to content
Permalink
Browse files

認証済ユーザーがアクセスできるマイページの作成とサインアウト処理の実装

  • Loading branch information...
h-sakano committed Dec 3, 2018
1 parent bdb296b commit 69954b9af8156baccf476471a731ac09ddb8532f
Showing with 47 additions and 2 deletions.
  1. +4 −1 src/components/GlobalNavi.vue
  2. +6 −0 src/router.ts
  3. +4 −0 src/store.ts
  4. +32 −0 src/views/MyPage.vue
  5. +1 −1 src/views/SignIn.vue
@@ -25,9 +25,12 @@
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<router-link to="/signin" class="button is-primary">
<router-link to="/signin" class="button is-primary" v-if="!$store.getters.isAuthenticated">
<strong>Sign in</strong>
</router-link>
<router-link to="/mypage" class="button is-primary" v-if="$store.getters.isAuthenticated">
<strong>Mypage</strong>
</router-link>
</div>
</div>
</div>
@@ -26,5 +26,11 @@ export default new Router({
name: 'signin',
component: () => import('./views/SignIn.vue'),
},
{
path: '/mypage',
name: 'mypage',
component: () => import('./views/MyPage.vue'),
meta: { requiresAuth: true },
},
],
})
@@ -45,5 +45,9 @@ export default new Vuex.Store<StateType>({
})
}
},
signOut ({ commit }) {
firebase.auth().signOut()
commit('setUser', null)
},
},
})
@@ -0,0 +1,32 @@
<template>
<div class="my-page">
<h1 class="title is-6">Hello, {{displayName}}.</h1>
<button class="button is-primary" @click="signOut">
<strong>Sign out</strong>
</button>
</div>
</template>

<script lang="ts">
import firebase from 'firebase/app'
import 'firebase/auth'
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class MyPage extends Vue {
private signOut () {
this.$store.dispatch('signOut')
this.$router.push('/')
}
get displayName (): string {
return this.$store.getters.user.displayName || 'Nameless'
}
}
</script>

<style scoped>
.my-page {
text-align: center;
}
</style>
@@ -29,7 +29,7 @@ export default class SignIn extends Vue {
defaultCountry: 'JP',
},
],
signInSuccessUrl: '/',
signInSuccessUrl: '/mypage',
})
}
}

0 comments on commit 69954b9

Please sign in to comment.
You can’t perform that action at this time.