아바타 이미재 추가 + 로그인 메뉴 분기처리

package-lock.json

@@ -2614,6 +2614,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -3172,6 +3177,11 @@
         "which": "^2.0.1"
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -6448,6 +6458,16 @@
         "object-visit": "^1.0.0"
       }
     },
+    "md5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz",
+      "integrity": "sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=",
+      "requires": {
+        "charenc": "~0.0.1",
+        "crypt": "~0.0.1",
+        "is-buffer": "~1.1.1"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/proxy": "^1.3.3",
+    "md5": "^2.2.1",
     "nuxt": "^2.0.0",
     "vue-material": "^1.0.0-beta-11",
     "vuelidate": "^0.7.4"

pages/index.vue

@@ -9,9 +9,27 @@
         NuxtNews
       </nuxt-link>
       <div class="md-toolbar-section-end">
-        <md-button @click="$router.push('/login')">Login</md-button>
-        <md-button @click="$router.push('/register')">Register</md-button>
-        <md-button class="md-accent" @click="showRightSidepanel = true">Categorises</md-button>
+        <template v-if="isAuthenticated">
+          <md-button>
+            <md-avatar><img :src="user.avatar" :alt="user.email"></md-avatar>{{ user.email }}
+          </md-button>
+          <md-button>
+            Logout
+          </md-button>
+        </template>
+
+        <template v-else>
+          <md-button @click="$router.push('/login')">
+            Login
+          </md-button>
+          <md-button @click="$router.push('/register')">
+            Register
+          </md-button>
+        </template>
+
+        <md-button @click="showRightSidepanel = true" class="md-accent">
+          Categorises
+        </md-button>
       </div>
     </md-toolbar>
 
@@ -134,6 +152,12 @@ export default {
     },
     country () {
       return this.$store.getters.country
+    },
+    user () {
+      return this.$store.getters.user
+    },
+    isAuthenticated () {
+      return this.$store.getters.isAuthenticated
     }
   },
   watch: {

store/index.js

@@ -1,4 +1,5 @@
 import Vuex from 'vuex'
+import md5 from 'md5'
 
 const createStore = () => {
   return new Vuex.Store({
@@ -7,7 +8,8 @@ const createStore = () => {
       loading: false,
       category: '',
       token: null,
-      country: 'us'
+      country: 'us',
+      user: null
     },
     mutations: {
       setHeadLines (state, headlines) {
@@ -24,6 +26,9 @@ const createStore = () => {
       },
       setToken (state, token) {
         state.token = token
+      },
+      setUser (state, user) {
+        state.user = user
       }
     },
     actions: {
@@ -40,6 +45,9 @@ const createStore = () => {
             '/register/',
             userPayload
           )
+          const avatar = `http://gravatar.com/avatar/${md5(autuUserData.email)}?d=identicon`
+          const user = { email: autuUserData.email, avatar }
+          commit('setUser', user)
           commit('setToken', autuUserData.idToken)
           commit('setLoading', false)
         } catch (error) {
@@ -52,7 +60,8 @@ const createStore = () => {
       loading: state => state.loading,
       category: state => state.category,
       country: state => state.country,
-      isAuthenticated: state => !!state.token
+      isAuthenticated: state => !!state.token,
+      user: state => state.user
     }
   })
 }