basic auth

webdevmatics · Feb 5, 2018 · e8fa1c6 · e8fa1c6
1 parent fa271f5
commit e8fa1c6
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 18 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -2,17 +2,27 @@
   <div id="app">
 
     <div class="navbar">
-      <router-link to="/" class="navbar-brand">VueFire</router-link>
       <ul class="nav navbar-nav">
 
         <li>
+           <router-link to="/">VueFire</router-link>
+        </li>
+        <li v-if="!authUser">
           <router-link to="/sign-in">SignIn</router-link>
         </li>
 
-        <li>
+        <li v-if="!authUser">
           <router-link to="/sign-up">SignUp</router-link>
         </li>
+
+        <li v-if="authUser">
+          <a @click="logout"> Logout</a>
+          <a href="#">{{authUser.identifier}}</a>
+
+       </li>
       </ul>
+
+
     </div>
 
     <img src="./assets/logo.png">
@@ -22,7 +32,34 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  data(){
+    return {
+      authUser:null
+    }
+  },
+  watch:{
+    '$route':'setAuthUser'
+  },
+
+  methods:{
+    setAuthUser(){
+      this.authUser=firebase.auth().currentUser;
+    },
+    logout(){
+      firebase.auth().signOut()
+        .then(()=>{
+          this.$router.replace('/sign-in')
+        })
+        .catch((e)=>{
+          alert(e.message)
+        })
+    }
+  },
+  created(){
+    this.setAuthUser();
+    // this.authUser=firebase.auth().currentUser;
+  }
 }
 </script>
 

diff --git a/src/components/SignIn.vue b/src/components/SignIn.vue
@@ -8,7 +8,7 @@
             <br>
             <input type="password" v-model="formData.password" class="form-control" placeholder="password">
             <br>
-            <button class="btn btn-success">Signin</button>
+            <button class="btn btn-success" @click="signIn">Signin</button>
         </div>
 
     </div>
@@ -26,7 +26,18 @@
                 }
             }
         },
-        methods: {},
+        methods: {
+            signIn(){
+                firebase.auth().signInWithEmailAndPassword(this.formData.email,this.formData.password)
+                    .then((user)=>{
+                      this.$router.replace('/hello')
+
+                    })
+                    .catch((e)=>{
+                        alert(e.message)
+                    })
+            }
+        },
 
         created(){
 

diff --git a/src/components/Signup.vue b/src/components/Signup.vue
@@ -8,8 +8,6 @@
             <br>
             <input type="password" v-model="formData.password" class="form-control" placeholder="password">
             <br>
-            <input type="password" class="form-control" placeholder="confirm password">
-            <br>
             <button class="btn btn-success" @click="signUp">SignUp</button>
         </div>
 
@@ -31,7 +29,7 @@
             signUp(){
                 firebase.auth().createUserWithEmailAndPassword(this.formData.email,this.formData.password)
                     .then((user)=>{
-                        alert('created')
+                      this.$router.replace('/hello')
                     })
                     .catch((e)=>{
                     alert('oops'+e.message);

diff --git a/src/main.js b/src/main.js
@@ -7,7 +7,7 @@ import firebase from 'firebase'
 
 Vue.config.productionTip = false
 
-
+let app;
 var config = {
   apiKey: "AIzaSyDlFQmbshbz32CxUn8mFHfGm7opw5UhUZg",
   authDomain: "tinkering-6f440.firebaseapp.com",
@@ -22,9 +22,14 @@ firebase.initializeApp(config);
 window.firebase=firebase;
 
 /* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  components: { App },
-  template: '<App/>'
-})
+firebase.auth().onAuthStateChanged((user)=>{
+  if(!app){
+    app= new Vue({
+      el: '#app',
+      router,
+      components: { App },
+      template: '<App/>'
+    });
+  }
+});
+
diff --git a/src/router/index.js b/src/router/index.js
@@ -6,22 +6,43 @@ import Signup from '@/components/Signup'
 
 Vue.use(Router)
 
-export default new Router({
+let router = new Router({
   routes: [
     {
       path: '/hello',
       name: 'HelloWorld',
-      component: HelloWorld
+      component: HelloWorld,
+      meta:{
+        requiresAuth:true
+      }
     },
     {
       path: '/sign-in',
       name: 'SignIn',
       component: SignIn
     },
+    {
+      path: '*',
+      redirect: '/sign-in',
+    },
     {
       path: '/sign-up',
       name: 'Signup',
       component: Signup
     }
   ]
-})
+});
+
+router.beforeEach((to,from,next)=>{
+  let currentUser=firebase.auth().currentUser;
+  let requiresAuth=to.matched.some(record=>record.meta.requiresAuth);
+
+  if(requiresAuth && !currentUser) next('sign-in')
+  else if (!requiresAuth && currentUser) next('hello')
+  else next()
+});
+
+export default router
+
+
+