新增 ability (缺少登入更新)

resources/js/src/@core/libs/acl/utils.js

@@ -17,7 +17,7 @@ export const can = (action, subject) => {
  * Based on item's action and resource
  * @param {Object} item navigation object item
  */
-export const canViewVerticalNavMenuLink = item => can(item.action, item.resource)
+export const canViewVerticalNavMenuLink = item => can('read', item.route)
 
 /**
  * Check if user can view item based on it's ability

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

@@ -6,6 +6,37 @@ 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
+
+let existingAbility = []
+if (userData) {
+  if (userData.ability === 'manager') {
+    existingAbility = [
+      {
+        action: 'read',
+        subject: 'home',
+      },
+      {
+        action: 'read',
+        subject: 'second-page',
+      },
+      {
+        action: 'read',
+        subject: 'permission',
+      },
+    ]
+  } else {
+    existingAbility = [
+      {
+        action: 'read',
+        subject: 'home',
+      },
+      {
+        action: 'read',
+        subject: 'second-page',
+      },
+    ]
+  }
+}
 
 export default new Ability(existingAbility || initialAbility)

resources/js/src/libs/acl/config.js

@@ -1,8 +1,18 @@
+// export const initialAbility = [
+//   {
+//     action: 'read',
+//     subject: 'Auth',
+//   },
+// ]
+
 export const initialAbility = [
   {
     action: 'read',
-    subject: 'Auth',
+    subject: 'home',
+  },
+  {
+    action: 'read',
+    subject: 'second-page',
   },
 ]
-
 export const _ = undefined

resources/js/src/main.js

@@ -5,6 +5,7 @@ import VueCompositionAPI from '@vue/composition-api'
 import router from './router'
 import store from './store'
 import App from './App.vue'
+import './libs/acl'
 
 // Global Components
 import './global-components'

resources/js/src/views/Login.vue

@@ -12,35 +12,17 @@
       <!-- /Brand logo-->
 
       <!-- Left Text-->
-      <b-col
-        lg="8"
-        class="d-none d-lg-flex align-items-center p-5"
-      >
+      <b-col lg="8" class="d-none d-lg-flex align-items-center p-5">
         <div class="w-100 d-lg-flex align-items-center justify-content-center px-5">
-          <b-img
-            fluid
-            :src="imgUrl"
-            alt="Login V2"
-          />
+          <b-img fluid :src="imgUrl" alt="Login V2" />
         </div>
       </b-col>
       <!-- /Left Text-->
 
       <!-- Login-->
-      <b-col
-        lg="4"
-        class="d-flex align-items-center auth-bg px-2 p-lg-5"
-      >
-        <b-col
-          sm="8"
-          md="6"
-          lg="12"
-          class="px-xl-2 mx-auto"
-        >
-          <b-card-title
-            title-tag="h2"
-            class="font-weight-bold mb-1"
-          >
+      <b-col lg="4" class="d-flex align-items-center auth-bg px-2 p-lg-5">
+        <b-col sm="8" md="6" lg="12" class="px-xl-2 mx-auto">
+          <b-card-title title-tag="h2" class="font-weight-bold mb-1">
             Welcome to Vuexy! 👋
           </b-card-title>
           <b-card-text class="mb-2">
@@ -49,28 +31,12 @@
 
           <!-- form -->
           <validation-observer ref="loginValidation">
-            <b-form
-              class="auth-login-form mt-2"
-              @submit.prevent
-            >
+            <b-form class="auth-login-form mt-2" @submit.prevent>
               <!-- 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"
-                    :state="errors.length > 0 ? false:null"
-                    name="login-email"
-                    placeholder="john@example.com"
-                  />
+              <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"
+                    :state="errors.length > 0 ? false : null" name="login-email" placeholder="john@example.com" />
                   <small class="text-danger">{{ errors[0] }}</small>
                 </validation-provider>
               </b-form-group>
@@ -79,35 +45,18 @@
               <b-form-group>
                 <div class="d-flex justify-content-between">
                   <label for="login-password">Password</label>
-                  <b-link :to="{name:'auth-forgot-password-v2'}">
+                  <b-link :to="{ name: 'auth-forgot-password-v2' }">
                     <small>Forgot Password?</small>
                   </b-link>
                 </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"
-                      :state="errors.length > 0 ? false:null"
-                      class="form-control-merge"
-                      :type="passwordFieldType"
-                      name="login-password"
-                      placeholder="············"
-                    />
+                <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"
+                      :state="errors.length > 0 ? false : null" class="form-control-merge" :type="passwordFieldType"
+                      name="login-password" placeholder="············" />
                     <b-input-group-append is-text>
-                      <feather-icon
-                        class="cursor-pointer"
-                        :icon="passwordToggleIcon"
-                        @click="togglePasswordVisibility"
-                      />
+                      <feather-icon class="cursor-pointer" :icon="passwordToggleIcon"
+                        @click="togglePasswordVisibility" />
                     </b-input-group-append>
                   </b-input-group>
                   <small class="text-danger">{{ errors[0] }}</small>
@@ -116,22 +65,13 @@
 
               <!-- checkbox -->
               <b-form-group>
-                <b-form-checkbox
-                  id="remember-me"
-                  v-model="status"
-                  name="checkbox-1"
-                >
+                <b-form-checkbox id="remember-me" v-model="status" name="checkbox-1">
                   Remember Me
                 </b-form-checkbox>
               </b-form-group>
 
               <!-- submit buttons -->
-              <b-button
-                type="submit"
-                variant="primary"
-                block
-                @click="validationForm"
-              >
+              <b-button type="submit" variant="primary" block @click="validationForm">
                 Sign in
               </b-button>
             </b-form>
@@ -139,7 +79,7 @@
 
           <b-card-text class="text-center mt-2">
             <span>New on our platform? </span>
-            <b-link :to="{name:'page-auth-register-v2'}">
+            <b-link :to="{ name: 'page-auth-register-v2' }">
               <span>&nbsp;Create an account</span>
             </b-link>
           </b-card-text>
@@ -153,34 +93,22 @@
 
           <!-- social buttons -->
           <div class="auth-footer-btn d-flex justify-content-center">
-            <b-button
-              variant="facebook"
-              href="javascript:void(0)"
-            >
+            <b-button variant="facebook" href="javascript:void(0)">
               <feather-icon icon="FacebookIcon" />
             </b-button>
-            <b-button
-              variant="twitter"
-              href="javascript:void(0)"
-            >
+            <b-button variant="twitter" href="javascript:void(0)">
               <feather-icon icon="TwitterIcon" />
             </b-button>
-            <b-button
-              variant="google"
-              href="javascript:void(0)"
-            >
+            <b-button variant="google" href="javascript:void(0)">
               <feather-icon icon="MailIcon" />
             </b-button>
-            <b-button
-              variant="github"
-              href="javascript:void(0)"
-            >
+            <b-button variant="github" href="javascript:void(0)">
               <feather-icon icon="GithubIcon" />
             </b-button>
           </div>
         </b-col>
       </b-col>
-    <!-- /Login-->
+      <!-- /Login-->
     </b-row>
   </div>
 </template>
@@ -259,6 +187,37 @@ export default {
             .then(res => {
               useJwt.setToken(res.data.token)
               localStorage.setItem('userData', res.data.userData)
+
+              // let existingAbility = []
+              // if (res.data.userData.ability === 'manager') {
+              //   existingAbility = [
+              //     {
+              //       action: 'read',
+              //       subject: 'home',
+              //     },
+              //     {
+              //       action: 'read',
+              //       subject: 'second-page',
+              //     },
+              //     {
+              //       action: 'read',
+              //       subject: 'permission',
+              //     },
+              //   ]
+              // } else {
+              //   existingAbility = [
+              //     {
+              //       action: 'read',
+              //       subject: 'home',
+              //     },
+              //     {
+              //       action: 'read',
+              //       subject: 'second-page',
+              //     },
+              //   ]
+              // }
+              // this.$ability.update(existingAbility)
+
               if (this.$route.query.redirect) {
                 this.$router.push(this.$route.query.redirect)
               } else {