vue-auth

const LOGIN = "LOGIN";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGOUT = "LOGOUT";

const store = new Vuex.Store({
  state: {
    isLoggedIn: localStorage.getItem("token")
  },
  mutations: {
    [LOGIN](state) {
      state.pending = true;
    },
    [LOGIN_SUCCESS](state) {
      state.isLoggedIn = true;
      state.pending = false;
    },
    [LOGOUT](state) {
      state.isLoggedIn = false;
    }
  },
  actions: {
    login({
      state,
      commit,
      rootState
    }, creds) {
      console.log("login...", creds);
      commit(LOGIN); // show spinner
      return new Promise(resolve => {
        setTimeout(() => {
          localStorage.setItem("token", "JWT");
          commit(LOGIN_SUCCESS);
          resolve();
        }, 1000);
      });

    },
    logout({
      commit
    }) {
      localStorage.removeItem("token");
      commit(LOGOUT);
    }
  },
  getters: {
    isLoggedIn: state => {
      return state.isLoggedIn;
    }
  }
});

const mainNavTpl = `
    <section>
     <router-link to="/">Home</router-link>
     <router-link to="/secret">Secret</router-link>
     <router-link to="/login" v-if="!isLoggedIn">Login</router-link>
     <router-link to="#" @click.native="logout" v-if="isLoggedIn">Logout</router-link>
    </section>
    
`
const MainNav = Vue.component('main-nav', {
  template: mainNavTpl,
  methods: {
    ...Vuex.mapActions(["logout"])
  },
  computed: {
    ...Vuex.mapGetters(["isLoggedIn"])
  }
});
const Home = Vue.component('home', {
  template: "<h1>Home</h1>"
});
const Secret = Vue.component('secret', {
  template: "<h1>Secret</h1>"
});
const loginTpl = `
  <form @submit.prevent="login()">
   <input type="text" placeholder="email" v-model="email">
   <input type="password" placeholder="password" v-model="password">
   <button type="submit">Login</button>
  </form>
 
`
const Login = Vue.component('login', {
  template: loginTpl,
  data() {
    return {
      email: "",
      password: ""
    }
  },
  methods: {
    login() {
      this.$store.dispatch("login", {
        email: this.email,
        password: this.password
      }).then(res => {
        this.$router.push('/');
      })
    }
  },
});
const routes = [{
    path: '/',
    component: Home
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/secret',
    component: Secret,
    beforeEnter (to, from, next) {
        console.log(store.state.isLoggedIn)
        if(store.state.isLoggedIn==true){
          next()
        }
        else{    
          next('/login')
        }
    }
      
  }
]
const router = new VueRouter({
  routes
})
const app = new Vue({
  router,
  store,
  components: {
    "main-nav": MainNav
  }
}).$mount('#app')