mixin role and config url

resources/js/vue/components/modal/user/Role.vue

@@ -29,9 +29,10 @@
 <script>
 import { mapGetters, mapMutations } from "vuex";
 import { ApiService } from "@/services";
+import { roles } from "@/config/utils";
 export default {
   data: () => ({
-    items: ["Admin", "SuperVisior", "User"],
+    items: roles,
     data: { roles: "" }
   }),
   methods: {

resources/js/vue/config/urls.js

@@ -0,0 +1,4 @@
+const urls = {
+    home : '/dashboard',
+};
+export {urls};

resources/js/vue/config/utils.js

@@ -0,0 +1,6 @@
+const roles = [
+    'Admin',
+    'User',
+    'Supervisor',
+];
+export { roles };

resources/js/vue/main.js

@@ -42,6 +42,9 @@ if (TokenService.getToken()) {
   }
 }
 
+import hasRole from '@/services/mixin/hasRole'
+Vue.mixin(hasRole)
+
 /* eslint-disable no-new */
 new Vue({
   i18n,

resources/js/vue/router/index.js

@@ -8,7 +8,7 @@
 
 // Lib imports
 import Vue from 'vue'
-import VueAnalytics from 'vue-analytics'
+// import VueAnalytics from 'vue-analytics'
 import Router from 'vue-router'
 import Meta from 'vue-meta'
 import { TokenService } from '@/services'
@@ -52,10 +52,12 @@ const router = new Router({
 
 Vue.use(Meta)
 
+
 router.beforeEach((to, from, next) => {
   const isPublic = to.matched.some(record => record.meta.public);
   const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
   const loggedIn = !!TokenService.getToken();
+  const roles = to.matched.some(record => record.meta.roles);
   if (!isPublic && !loggedIn) {
     return next({
       path:'/login',
@@ -64,10 +66,15 @@ router.beforeEach((to, from, next) => {
   }
 
   // Do not allow user to visit login page or register page if they are logged in
-  if (loggedIn && onlyWhenLoggedOut) {
+  if (loggedIn && onlyWhenLoggedOut && policy) {
     return next('/')
   }
 
+  // Do not allow user to visit Pages then not access roles
+  // if (roles && !$hasRole(roles)) {
+  //   return next('/')
+  // }
+
   next();
 });
 

resources/js/vue/router/paths.js

@@ -6,8 +6,8 @@
 export default [
   {
     path: '/dashboard',
-    // Relative to /src/views
-    view: 'Dashboard'
+    name: 'Dashboard',
+    view: 'Dashboard',
   },
   {
     path: '/my-info',
@@ -22,7 +22,7 @@ export default [
   {
     path: '/manage-users',
     name: 'Manage Users',
-    view: 'ManageUsers'
+    view: 'ManageUsers',
   },
   {
     path: '/test-creator',
@@ -74,7 +74,7 @@ export default [
     meta: {
         public: true,  // Allow access to even if not logged in
         onlyWhenLoggedOut: true
-    }
+    },
   },
   {
     path: '/test-creator',

resources/js/vue/services/auth/storage.service.js

@@ -39,7 +39,7 @@ const TokenService = {
     },
 
     saveInfo(info = null) {
-        info = qs.stringify(info);
+        info = qs.stringify(info);        
         localStorage.setItem(INFO, info)
     },
 

resources/js/vue/services/mixin/hasRole.js

@@ -0,0 +1,16 @@
+import { TokenService } from '@/services'
+export default {
+    methods: {
+        $hasRole(roles) {
+            if (TokenService.getToken()) {
+                roles = roles.split('|');
+                for (const role of roles) {
+                    if(TokenService.getInfo().roles && Array.isArray(TokenService.getInfo().roles) && TokenService.getInfo().roles.includes(role)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+    },
+}

resources/js/vue/store/mutations.js

@@ -3,5 +3,8 @@ export default {
         if(info.user) {
             state.user = info.user;
         }
+        if(info.roles) {
+            state.roles = info.roles;
+        }
     }
 };

resources/js/vue/views/Dashboard.vue

@@ -5,7 +5,7 @@
       title="Material Dashboard Heading"
       text=""
     >
-      <v-layout row wrap>
+      <v-layout row wrap >
         <v-flex v-for="(Card, Key ) in Cards" :class="[Card.column , 'pa-2']" :key="Key">
           <router-link :to="Card.route">
             <material-cards

resources/js/vue/views/Role.vue

@@ -1,50 +0,0 @@
-<template>
-  <v-form>
-    <v-container grid-list-xs fluid>
-      <material-card class=""
-        color="black"
-        title="Role"
-      >
-        <v-layout row align-center justify-center wrap class="px-5 mb-3">
-          <v-flex xs12 md3 sm3>
-            <v-select
-              :items="items"
-              v-model="roles"
-              label="Roles"
-              color="black"
-            ></v-select>
-          </v-flex>
-        </v-layout>
-        <v-layout row wrap>
-          <v-layout align-center justify-center wrap class="px-5 mt-2">
-            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
-              <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
-              <span class="white--text">Add</span>
-            </v-btn>
-            <router-link to="/dashboard">
-              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
-                <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
-                <span class="black--text">Close</span>
-              </v-btn>
-            </router-link>
-          </v-layout>
-        </v-layout>
-      </material-card>
-    </v-container>
-  </v-form>
-</template>
-<script>
-export default {
-  name: "",
-  data: () => ({
-    items : [
-      'SuperAdmin',
-      'Admin',
-      'Supervisor',
-      'User'
-    ]
-  })
-}
-</script>
-<style lang="scss" scoped>
-</style>