Use vuex to manage login, register

nuxt.config.js

@@ -14,7 +14,9 @@ export default {
   css: [],
   css: [],
 
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: [],
+  plugins: [
+    // '~/plugins/firebase.js',
+  ],
 
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,
   components: true,
@@ -22,9 +24,9 @@ export default {
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
   buildModules: [
   buildModules: [
     // https://go.nuxtjs.dev/eslint
     // https://go.nuxtjs.dev/eslint
-    '@nuxtjs/eslint-module',
+    // '@nuxtjs/eslint-module',
     // https://go.nuxtjs.dev/stylelint
     // https://go.nuxtjs.dev/stylelint
-    '@nuxtjs/stylelint-module',
+    // '@nuxtjs/stylelint-module',
   ],
   ],
 
 
   // Modules (https://go.nuxtjs.dev/config-modules)
   // Modules (https://go.nuxtjs.dev/config-modules)

package.json

@@ -34,7 +34,11 @@
     "@nuxtjs/axios": "^5.12.3",
     "@nuxtjs/axios": "^5.12.3",
     "@nuxtjs/pwa": "^3.0.2",
     "@nuxtjs/pwa": "^3.0.2",
     "core-js": "^3.6.5",
     "core-js": "^3.6.5",
-    "nuxt": "^2.14.6"
+    "element-ui": "^2.14.1",
+    "firebase": "^8.2.1",
+    "nuxt": "^2.14.6",
+    "vue-router": "^3.4.9",
+    "vuex": "^3.6.0"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/cli": "^11.0.0",

pages/login.vue → pages/login/index.vue

@@ -56,20 +56,29 @@ export default {
   },
   },
 
 
   methods: {
   methods: {
+    // onSubmit() {
+    //   this.$axios
+    //     .$post(
+    //       'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc',
+    //       {
+    //         email: this.email,
+    //         password: this.password,
+    //         returnSecureToken: true,
+    //       }
+    //     )
+    //     .then((result) => {
+    //       alert('Login Success !')
+    //       // window.location.href = '/'
+    //     })
+    // },
     onSubmit() {
     onSubmit() {
-      this.$axios
-        .$post(
-          'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc',
-          {
-            email: this.email,
-            password: this.password,
-            returnSecureToken: true,
-          }
-        )
-        .then((result) => {
-          alert('Login Success !')
-          // window.location.href = '/'
+      this.$store
+        .dispatch('authenticationUser', {
+          email: this.email,
+          password: this.password,
+          checkLogin: this.checkLogin,
         })
         })
+        // .then(() => this.$router.push('/success_goi_nha'))
     },
     },
   },
   },
 }
 }

pages/register/index.vue

@@ -67,18 +67,28 @@ export default {
     onSubmit() {
     onSubmit() {
       const valPass = this.checkPw()
       const valPass = this.checkPw()
       if (valPass) {
       if (valPass) {
-        this.$axios
-          .$post(
-            'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc',
-            {
-              email: this.email,
-              password: this.password,
-              returnSecureToken: true,
-            }
-          )
-          .then((result) => {
-            alert('Register Success, please login')
-            window.location.href = '/'
+        // this.$axios
+        //   .$post(
+        //     'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc',
+        //     {
+        //       email: this.email,
+        //       password: this.password,
+        //       returnSecureToken: true,
+        //     }
+        //   )
+        //   .then((result) => {
+        //     alert('Register Success, please login')
+        //     window.location.href = '/'
+        //   })
+        this.$store
+        .dispatch('authenticationUser', {
+          email: this.email,
+          password: this.password,
+          // checkLogin: false,
+        })
+        .then((response) => this.$router.push('/login'))
+        .catch((e)=> {
+            alert(e)
           })
           })
       } else {
       } else {
         alert("repassword don't match with password")
         alert("repassword don't match with password")

store/index.js

+import Vuex from 'vuex'
+
+const createStore = () => {
+  return new Vuex.Store({
+    state: {
+      token: null,
+    },
+    mutations: {
+      setToken(state, token) {
+        state.token = token
+      },
+    },
+    actions: {
+      authenticationUser(context, credentials) {
+        let loginApi =
+          'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc'
+        if (!credentials.checkLogin) {
+          loginApi =
+            'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyA0qXrqxpNc5FuQ_PE9D2bE4nlmPTuFAnc'
+        }
+        return this.$axios
+          .$post(loginApi, {
+            email: credentials.email,
+            password: credentials.password,
+            returnSecureToken: true,
+          })
+          .then((result) => {
+            if (!credentials.checkLogin) {
+              alert('Register Success !')
+            } else {
+              alert('Login Success !')
+            }
+            // window.location.href = '/'
+          })
+          .catch((e) => {
+            alert(e)
+          })
+      },
+    },
+  })
+}
+export default createStore