新增 ability routeProtection

resources/js/src/libs/acl/ability.js

@@ -6,7 +6,7 @@ import { initialAbility } from './config'
 // ? You can update this if you store user abilities to more secure place
 // ! Anyone can update localStorage so be careful and please update this
 const userData = JSON.parse(localStorage.getItem('userData'))
-// const existingAbility = userData ? userData.ability : null
+const existingAbility = userData ? userData.ability : null
 
 export function getExistingAbility(userAbility) {
   switch (userAbility) {
@@ -43,4 +43,19 @@ export function getExistingAbility(userAbility) {
   }
 }
 
-export default new Ability(getExistingAbility(userData.ability) || initialAbility)
+// const { can, cannot, build } = new AbilityBuilder(createMongoAbility)
+// can('read', 'all')
+
+// switch (userData.ability) {
+//   case 'manager':
+//     can('read', 'all')
+//     break
+
+//   default:
+//     can('read', 'all')
+//     cannot('read', 'permission')
+//     break
+// }
+// const ability = build()
+
+export default new Ability(getExistingAbility(existingAbility) || initialAbility)

resources/js/src/libs/acl/routeProtection.js

@@ -1,5 +1,5 @@
 import ability from './ability'
 
-export const canNavigate = to => to.matched.some(route => ability.can(route.meta.action || 'read', route.meta.resource))
+export const canNavigate = to => to.matched.some(route => ability.can('read', route.meta.resource))
 
-export const _ = undefined
+export const haveAbility = to => to.matched.some(route => ability.can('read', route.name))

resources/js/src/navigation/vertical/index.js

@@ -1,4 +1,7 @@
 export default [
+  {
+    header: 'Apps & Pages',
+  },
   {
     title: 'Home',
     route: 'home',

resources/js/src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import { isUserLoggedIn } from '../auth/utils'
+import { haveAbility } from '../libs/acl/routeProtection'
 
 Vue.use(VueRouter)
 
@@ -78,7 +79,14 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  if (to.path === '/login' || to.path === '/error-404' || isUserLoggedIn()) {
+  if (to.path === '/login' || to.path === '/error-404') {
+    next()
+  } else if (isUserLoggedIn()) {
+    if (haveAbility(to)) {
+      next()
+    } else {
+      next({ path: '/error-404' })
+    }
     next()
   } else {
     next({ path: '/login', query: { redirect: to.fullPath } })

resources/js/src/views/Login.vue

@@ -35,7 +35,7 @@
               <!-- email -->
               <b-form-group label="Email" label-for="login-email">
                 <validation-provider #default="{ errors }" name="Email" rules="required|email">
-                  <b-form-input id="login-email" ref="inputEmail" v-model="userEmail"
+                  <b-form-input id="login-email" v-model="userEmail"
                     :state="errors.length > 0 ? false : null" name="login-email" placeholder="john@example.com" />
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
@@ -51,7 +51,7 @@
                 </div>
                 <validation-provider #default="{ errors }" name="Password" rules="required">
                   <b-input-group class="input-group-merge" :class="errors.length > 0 ? 'is-invalid' : null">
-                    <b-form-input id="login-password" ref="inputPassword" v-model="password"
+                    <b-form-input id="login-password" v-model="password"
                       :state="errors.length > 0 ? false : null" class="form-control-merge" :type="passwordFieldType"
                       name="login-password" placeholder="············" />
                     <b-input-group-append is-text>
@@ -184,7 +184,7 @@ export default {
             },
           })
 
-          useJwt.login({ email: this.$refs.inputEmail.value, password: this.$refs.inputPassword.value })
+          useJwt.login({ email: this.userEmail, password: this.password })
             .then(res => {
               useJwt.setToken(res.data.token)
               localStorage.setItem('userData', res.data.userData)

routes/api.php

@@ -37,7 +37,7 @@ Route::post('/login', function (Request $request) {
     }
 
     return [
-        'token' => $user->createToken('login', ['Visitor'])->plainTextToken,
+        'token' => $user->createToken('login')->plainTextToken,
         'userData' => json_encode($user),
     ];
 });