aDD LOGout. Refactor routing to require auth on every path by default.

web/src/router.ts

@@ -2,9 +2,12 @@ import Vue from 'vue';
 import { default as Router, Route } from 'vue-router';
 
 import Login from '@/views/Login.vue';
+import Logout from '@/views/Logout.vue';
 import Measure from '@/views/Measure.vue';
 import Measures from '@/views/Measures.vue';
 import NewMeasure from '@/views/NewMeasure.vue';
+import NewMeasurement from '@/views/NewMeasurement.vue';
+import NotFound from '@/views/NotFound.vue';
 import QuickPanels from '@/views/QuickPanels.vue';
 import UserAccount from '@/views/UserAccount.vue';
 import { authStore } from '@/store';
@@ -26,37 +29,50 @@ const router = new Router({
       path: '/login',
       name: 'login',
       component: Login,
-      props: (route) => ({ redirect: route.query.redirect })
+      props: (route) => ({ redirect: route.query.redirect }),
+      meta: { allowPublic: true }
+    },
+    {
+      path: '/logout',
+      name: 'logout',
+      component: Logout,
+      meta: { allowPublic: true }
     },
     {
       path: '/measures',
       name: 'measures',
-      component: Measures,
-      meta: { requiresAuth: true }
+      component: Measures
     },
     {
       path: '/measures/:slug',
       name: 'measure',
-      component: Measure,
-      meta: { requiresAuth: true }
+      component: Measure
     },
     {
       path: '/user-account',
       name: 'user-account',
-      component: UserAccount,
-      meta: { requiresAuth: true }
+      component: UserAccount
     },
     {
       path: '/quick-panels',
       name: 'quick-panels',
-      component: QuickPanels,
-      meta: { requiresAuth: true }
+      component: QuickPanels
     },
     {
       path: '/new/measure',
       name: 'new-measure',
-      component: NewMeasure,
-      meta: { requiresAuth: true }
+      component: NewMeasure
+    },
+    {
+      path: '/new/measurement/:slug',
+      name: 'new-measurement',
+      component: NewMeasurement
+    },
+    {
+      path: '*',
+      name: 'not-found',
+      component: NotFound,
+      meta: { allowPublic: true }
     }
   ]
 });
@@ -77,12 +93,16 @@ async function getAuthToken(): Promise<string | null> {
 
 // Auth filter
 router.beforeEach(async (to, from, next) => {
-  if (to.matched.some((record) => record.meta.requiresAuth)) {
+  if (to.matched.some((record) => record.meta.allowPublic)) {
+    // no auth required
+    next();
+  } else {
+    // check for auth
     const token = await getAuthToken();
     if (!token) {
       next({ name: 'login', query: { redirect: to.path } });
-    } else { next(); } // if authed
-  } else { next(); } // if auth required
+    } else { next(); }
+  }
 });
 
 export default router;

web/src/store-modules/auth.ts

@@ -2,6 +2,7 @@ import {
   Action,
   Module,
   Mutation,
+  MutationAction,
   VuexModule
 } from 'vuex-module-decorators';
 import JwtDecode from 'jwt-decode';
@@ -42,6 +43,9 @@ export class AuthStoreModule extends VuexModule {
     return authToken;
   }
 
+  @MutationAction({ mutate: ['authToken'], rawError: true })
+  public async logout() { return { authToken: null }; }
+
   @Action({ rawError: true })
   public async findLocalToken(): Promise<string> {
     const encodedToken = localStorage.getItem(SESSION_KEY);

web/src/views/Logout.vue

@@ -0,0 +1,4 @@
+<template>
+</template>
+<script lang="ts" src="./logout.ts"></script>
+<style lang="scss" src="./logout.scss"></style>

web/src/views/NotFound.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id=not-found>
+    <h1>Not Found</h1>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({})
+export class NotFound extends Vue {
+}
+
+export default NotFound;
+</script>

web/src/views/logout.ts

@@ -0,0 +1,12 @@
+import { Component, Vue } from 'vue-property-decorator';
+import { authStore } from '@/store';
+
+@Component({})
+export class Logout extends Vue {
+  private mounted() {
+    authStore.logout();
+    this.$router.push({ name: 'login' });
+  }
+}
+
+export default Logout;