store all in vuex

layouts/default.vue

@@ -5,18 +5,15 @@
         <Logo />
       </div>
       <ul id="navbar-child">
-        <li><nuxt-link to="/">Home</nuxt-link></li>
+        <li><nuxt-link to="/ssss">Home</nuxt-link></li>
         <li><nuxt-link to="/chat">Chat Room</nuxt-link></li>
-        <li><nuxt-link to="/about">About Me</nuxt-link></li>
-        <li>
-          <!-- hi username -->
-          Hi
-          <!-- log out button -->
-        </li>
-        <li>
+        <li><nuxt-link to="/my_page">About Me</nuxt-link></li>
+        <li v-if="$store.getters.isAuth == true"><nuxt-link to="/login">Logout</nuxt-link></li>
+
+        <!-- <li> -->
           <!-- log in button -->
-          <nuxt-link to="/about">{Not login yet}</nuxt-link>
-        </li>
+          <!-- <nuxt-link to="/about">{Not login yet}</nuxt-link> -->
+        <!-- </li> -->
       </ul>
     </div>
     <div class="default_nuxt">

middleware/auth.js

+export default function (context) {
+  if (context.store.getters.isAuth == false) {
+    context.redirect('/login')
+  }
+}

nuxt.config.js

@@ -36,8 +36,8 @@ export default {
     // https://go.nuxtjs.dev/pwa
     '@nuxtjs/pwa',
     // https://go.nuxtjs.dev/content
-    '@nuxt/content',
-    '@nuxtjs/auth-next',
+    // '@nuxt/content',
+    // '@nuxtjs/auth-next',
   ],
 
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)

pages/login/index.vue

@@ -72,13 +72,11 @@ export default {
     //     })
     // },
     onSubmit() {
-      this.$store
-        .dispatch('authenticationUser', {
+      this.$store.dispatch('authenticationUser', {
         email: this.email,
         password: this.password,
         checkLogin: this.checkLogin,
       })
-        // .then(() => this.$router.push('/success_goi_nha'))
     },
   },
 }

pages/my_page/index.vue

+<template>
+  <div class="container">Hello {{ this.$store.state.token }}</div>
+</template>
+<script>
+export default {
+  middleware: 'auth',
+}
+</script>
+
+<style scope>
+@import '@/assets/css/custom.scss';
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>

store/index.js

@@ -9,6 +9,9 @@ const createStore = () => {
       setToken(state, token) {
         state.token = token
       },
+      clearToken(state) {
+        stateate.token = null
+      },
     },
     actions: {
       authenticationUser(context, credentials) {
@@ -29,6 +32,10 @@ const createStore = () => {
               alert('Register Success !')
             } else {
               alert('Login Success !')
+              // console.log(result)
+              context.commit('setToken', result.idToken)
+              // context.commit('setToken', result.idToken)
+              this.$router.push('my_page')
             }
             // window.location.href = '/'
           })
@@ -36,6 +43,16 @@ const createStore = () => {
             alert(e)
           })
       },
+      setLogoutTinme(context, duration) {
+        setTimeout(() => {
+          contextontext.commit('clearToken')
+        }, duration)
+      },
+    },
+    getters: {
+      isAuth(state) {
+        return state.token != null
+      },
     },
   })
 }