refactor: replace laravel-vuejs-permissions with vue-middleware

Author: themustafaomar

package-lock.json

@@ -34,6 +34,7 @@
     "vue": "^3.2.47",
     "vue-chart-3": "^3.1.8",
     "vue-i18n": "^9.2.2",
+    "vue-middleware": "^1.0.0-alpha.5",
     "vue-router": "^4.1.6",
     "vuetify": "^3.4.9",
     "wavesurfer.js": "^7.1.2",

package.json

@@ -16,14 +16,11 @@ app.config.globalProperties.$slice = (string, length = 25) => {
   return string.length >= length ? string.slice(0, length) + '...' : string
 }
 
+app.use(pinia)
+app.use(router)
+
 // Register plugins
 plugins(app)
 
-// Use Vue plugins
-app.use(pinia).use(router)
-
-// Run before each method of the router
-router.watch(app)
-
 // Mount!
 app.mount('#app')

src/main.js

@@ -1,19 +1,17 @@
 import { useAuthStore } from '@/stores/auth'
 
-export default ({ router, next, guest }) => {
+export default ({ redirect, guard }) => {
   const authStore = useAuthStore()
 
   // This is an authenticated route but the user
   // is not logged in so redirect to the login page.
-  if (!guest && !authStore.isLoggedIn) {
-    return router.push('/login')
+  if (guard !== 'guest' && !authStore.isLoggedIn) {
+    return redirect('/login')
   }
 
   // This is a guest route, and the user is authorized
   // let's redirect him/her to the dashboard home page.
-  if (guest && authStore.isLoggedIn) {
-    return router.push('/dashboard')
+  if (guard === 'guest' && authStore.isLoggedIn) {
+    return redirect('/dashboard')
   }
-
-  next()
 }

src/middleware/dashboard.js

@@ -87,7 +87,7 @@ import AppAuthHeading from '@/components/auth/Heading.vue'
 const appStore = useAppStore()
 const authStore = useAuthStore()
 const form = useForm({
-  email: '[email protected]',
+  email: 'admin@starter',
   password: 'password',
 })
 

src/pages/auth/login.vue

@@ -1,18 +1,17 @@
 import './axios'
 import './vform'
 import './laravel-echo'
-import './lodash'
 
 // Callable plugins
+import { useVueMiddleware } from './vue-middleware'
 import { useVuetify } from './vuetify'
 import { useGlobalComponents } from './global-components'
-import { useLaravelPermissions } from './laravel-permissions'
 
 // Call the callalble plugins that needs to the app instance
 // for registeration purposes, since we're using Vue v3
 // we need the app instance to register components and plugins etc..
 export const plugins = (app) => {
+  useVueMiddleware(app)
   useVuetify(app)
-  useLaravelPermissions(app)
   useGlobalComponents(app)
 }

src/plugins/index.js

@@ -0,0 +1,11 @@
+import vueMiddleware, { LaravelPermissionsDriver } from 'vue-middleware'
+import middleware from '@/middleware'
+
+export const useVueMiddleware = (app) => {
+  app.use(vueMiddleware, {
+    middleware,
+    permissions: {
+      driver: LaravelPermissionsDriver,
+    },
+  })
+}