JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/v2.0.3/dist/vue-router.js"></script>
<div id="app">
  <router-view></router-view>
  <router-link to="/logout">log out</router-link>
</div>

JavaScript

var loggedIn = false;

var Foo = {
  template: '<div>foo</div>'
}
var Bar = {
  template: '<div>bar</div>'
}
var Login = {
  template: '<button type="button" @click="login">log in</button>',
  methods: {
    login: function() {
      loggedIn = true;
      this.$router.replace('/');
    }
  }
}

var requireAuth = function(to, from, next) {
  console.log('requireauth triggered');
  console.log(to);
  if (!loggedIn) {
    next({
      name: 'login',
      query: {
        redirect: to.fullPath
      },
    });
  } else {
    next();
  }
};

var router = new VueRouter({
  routes: [{
    path: '/login',
    name: 'login',
    component: Login
  }, {
    path: '/',
    redirect: '/foo',
  }, {
    path: '/foo',
    meta: {
      requiresAuth: true
    },
    component: Foo,
    beforeEnter: requireAuth
  }, {
    path: '/bar',
    meta: {
      requiresAuth: true
    },
    component: Bar
  }, {
    path: '/logout',
    beforeEnter: function(to, from, next) {
      loggedIn = false;
      console.log('should be logged out, redirecting to /');
      next('/');
    }
  }]
});

new Vue({
  el: '#app',
  data: {},
  methods: {},
  router: router
})