Implement UI context based on user roles (#6, Fixes #10)

Author: alexwohlbruck

src/App.vue

@@ -20,12 +20,19 @@
           "
         >
           <v-btn
-            v-for="link in links"
-            :key="link.label"
+            v-for="route in $router.options.routes.filter(
+              (r) =>
+                r.meta &&
+                r.meta.showInNav &&
+                r.meta.showInNav.some(
+                  (role) => authenticatedUser.roles.map(r => r.id).includes(role)
+                )
+            )"
+            :key="route.name"
             text
-            :to="{ name: link.label }"
+            :to="{ name: route.name }"
             active-class="primary--text"
-            >{{ link.label }}</v-btn
+            >{{ route.name }}</v-btn
           >
         </div>
 
@@ -157,10 +164,10 @@ export default Vue.extend({
     if (storedUser) {
       this.$store.commit("SET_AUTHENTICATED_USER", {
         user: JSON.parse(storedUser),
-			});
-		}
-		// Refresh user data in case of an update
-		this.$store.dispatch("getAuthenticatedUser");
+      });
+    }
+    // Refresh user data in case of an update
+    this.$store.dispatch("getAuthenticatedUser");
   },
   methods: {
     signOut() {

src/router/index.js

@@ -5,13 +5,16 @@ import Home from '../views/Home.vue'
 import SignIn from '../views/SignIn.vue'
 import SignUp from '../views/SignUp.vue'
 import Clock from '../views/Clock.vue'
+import Approvals from '../views/Approvals.vue'
 import Availability from '../views/Availability.vue'
 import Schedule from '../views/Schedule.vue'
 import Messages from '../views/messages/Messages.vue'
 import Conversation from '../views/messages/Conversation.vue'
 
 Vue.use(VueRouter)
 
+const EMPLOYEE = 1, MANAGER = 2
+
 const routes = [
   {
     path: '/',
@@ -27,27 +30,47 @@ const routes = [
     path: '/sign-up',
     alias: '/confirmed',
     name: 'signUp',
-    component: SignUp
+    component: SignUp,
   },
   {
     path: '/clock',
     name: 'clock',
     component: Clock,
+    meta: {
+      showInNav: [EMPLOYEE]
+    }
+  },
+  {
+    path: '/approvals',
+    name: 'approvals',
+    component: Approvals,
+    meta: {
+      showInNav: [MANAGER]
+    }
   },
   {
     path: '/availability',
     name: 'availability',
     component: Availability,
+    meta: {
+      showInNav: [EMPLOYEE, MANAGER]
+    }
   },
   {
     path: '/schedule',
     name: 'schedule',
     component: Schedule,
+    meta: {
+      showInNav: [EMPLOYEE, MANAGER]
+    }
   },
   {
     path: '/messages',
     name: 'messages',
     component: Messages,
+    meta: {
+      showInNav: [EMPLOYEE, MANAGER]
+    },
     children: [{
       name: 'conversation',
       path: 'conversation/:conversationId',
@@ -62,4 +85,12 @@ const router = new VueRouter({
   routes
 })
 
+const userRole = 1
+
+router.beforeEach((to, from, next) => {
+  if (to.meta.showInNav && !to.meta.showInNav.includes(userRole))
+    next({ name: 'home' })
+  else next()
+})
+
 export default router

src/store/index.js

@@ -248,7 +248,7 @@ axios.interceptors.response.use(response => {
   console.log(error.request)
 
   // TODO: this is stupid, don't keep this. use custom axios config
-  if (error.request.responseURL == 'http://localhost:5000/api/users/me') return
+  if (error.request.responseURL == 'http://localhost:5000/users/me') return
 
   if (res.message || res.response.error) {
     message = res.message || res.response.error

src/views/Approvals.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-container class="home fill-height d-flex flex-column justify-center align-center">
+    <h2 class="text-h2 font-weight-bold mb-2">Aprovals</h2>
+  </v-container>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'approvals',
+  computed: {
+    ...mapState(['authenticatedUser'])
+  },
+  methods: {
+    ...mapActions(['signOut'])
+  }
+}
+</script>