move auth into vuex state

src/App.vue

@@ -38,12 +38,24 @@
 
 <script>
   import TopNav from './components/TopNav.vue';
+  import store from './store'
 
   export default {
     name: 'App',
+    store,
     components: {
       TopNav,
-    }
+    },
+    // pre-route auth checking
+    beforeRouteEnter(to, from, next) {
+      // if user is authenticated, continue
+      if (store.getters.isAuthenticated) return next();
+
+      // otherwise, redirect to login, preserving the requested route
+      const { name, fullPath } = to;
+      const query = (name !== undefined) ? { redirect: name } : { prev: fullPath };
+      return next({ name: 'login', query });
+    },
   }
 </script>
 

src/lib/authentication.js

@@ -1,7 +0,0 @@
-export function getUser() {
-  return Promise.resolve(null);
-}
-
-export function isAuthenticated() {
-  return getUser().then(Boolean);
-}

src/main.js

@@ -1,21 +1,17 @@
 import Vue from 'vue';
 import router from './router';
 import store from './store';
-import { isAuthenticated } from './lib/authentication';
 
 // pre-route auth checking
 router.beforeEach((to, from, next) => {
   // check if any of the matched routes require authentication
   if (to.matched.some(record => record.meta.requiresAuthentication)) {
-    return isAuthenticated().then((user) => {
-      // if user is authenticated, continue
-      if (user) return next();
+    if (store.getters.isAuthenticated) return next();
 
     // otherwise, redirect to login, preserving the requested route
     const { name, fullPath } = to;
     const query = (name !== undefined) ? { redirect: name } : { prev: fullPath };
     return next({ name: 'login', query });
-    });
   }
 
   return next();

src/pages/Login.vue

@@ -24,6 +24,7 @@
 <script>
   import { isAuthenticated } from '../lib/authentication';
   import TopNav from '../components/TopNav.vue';
+  import store from '../store'
 
   export default {
     name: 'login-page',
@@ -35,22 +36,21 @@
         sendTo: {},
       };
     },
-    beforeRouteEnter (to, from, next) {
-      const getRedirect = () => {
-        const { prev, redirect } = to.query;
+    beforeCreate() {
+      const getRedirect = (query) => {
+        const { prev, redirect } = query;
         if (redirect !== undefined) return { name: redirect };
         if (prev !== undefined) return { path: prev };
-        return { name: 'customers' };
+        return { name: 'app' };
       }
 
-      return isAuthenticated().then(user => {
-        const sendTo = getRedirect();
-        // if already logged in, redirect
-        if (user) return next(sendTo);
+      const sendTo = getRedirect(this.$route.query);
 
-        // preserve the sendTo property, render the login page
-        next(vm => vm.sendTo = sendTo);
-      });
+      // if authenticated, set to correct spot in the app
+      if (store.getters.isAuthenticated) return this.$router.replace(sendTo);
+
+      // if not authenticated, save redirect info for post-authentication redirect
+      return this.sendTo = sendTo;
     },
   }
 </script>

src/router/index.js

@@ -1,12 +1,12 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
-import App from './App.vue';
+import App from '../App.vue';
 
-import Login from './pages/Login.vue';
-import Customers from './pages/Customers.vue';
-import Orders from './pages/Orders.vue';
-import About from './pages/About.vue';
+import Login from '../pages/Login.vue';
+import Customers from '../pages/Customers.vue';
+import Orders from '../pages/Orders.vue';
+import About from '../pages/About.vue';
 
 Vue.use(VueRouter);
 

src/store/authentication.js

@@ -0,0 +1,10 @@
+export default {
+  state: {
+    user: null,
+  },
+  getters: {
+    isAuthenticated(state) {
+      return state.user !== null;
+    },
+  },
+};

src/store/index.js

@@ -1,11 +1,16 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import authentication from './authentication';
+
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
   state: {
   },
+  modules: {
+    authentication,
+  },
 });
 
 export default store;