new Changes

resources/js/vue/Admin/services/global/api.service.js

@@ -0,0 +1,100 @@
+import axios from 'axios'
+import { TokenService } from '../auth/storage.service'
+import store  from '@/store'
+
+const ApiService = {
+
+    init(baseURL) {
+        axios.defaults.baseURL = baseURL;
+    },
+
+    setHeader() {
+        axios.defaults.headers.common["Accept"] = `application/json`;
+        axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+    },
+
+    setAuthHeader() {
+        axios.defaults.headers.common["Authorization"] = `Bearer ${TokenService.getToken()}`;
+    },
+
+    removeAuthHeader() {
+        axios.defaults.headers.common["Authorization"] = null;
+    },
+
+    get(resource) {
+        return axios.get(resource)
+    },
+
+    post(resource, data) {
+        return axios.post(resource, data)
+    },
+
+    put(resource, data) {
+        data['_method'] = 'put';
+        return axios.post(resource, data)
+    },
+
+    delete(resource) {
+        let data = {'_method': 'delete'};
+        return axios.post(resource, data)
+    },
+
+    /**
+     * Perform a custom Axios request.
+     *
+     * data is an object containing the following properties:
+     *  - method
+     *  - url
+     *  - data ... request payload
+     *  - auth (optional)
+     *    - username
+     *    - password
+    **/
+    customRequest(data) {
+        return axios(data);
+    },
+
+    _401interceptor: null,
+
+    mount401Interceptor() {
+     this._401interceptor = axios.interceptors.response.use(
+         (response) => {
+             return response
+         },
+         async (error) => {
+             if (error.request.status == 401) {
+                 if (error.config.url.includes('login')) {
+                     // Refresh token has failed. Logout the user
+                     store.dispatch('auth/logout');
+                     throw error;
+                 } else {
+                     // Refresh the access token
+                     try{
+                         await store.dispatch('refreshToken')
+                         // Retry the original request
+                         return this.customRequest({
+                             method: error.config.method,
+                             url: error.config.url,
+                             data: error.config.data
+                         })
+                     } catch (e) {
+                         // Refresh has failed - reject the original request
+                         throw error
+                     }
+                 }
+             }
+
+             // If error was not 401 just reject as is
+             throw error
+         }
+     )
+ },
+
+ unmount401Interceptor() {
+     // Eject the interceptor
+     axios.interceptors.response.eject(this._401interceptor)
+ }
+}
+
+export default ApiService
+export { ApiService }

resources/js/vue/Admin/services/global/errorHandler.service.js

@@ -0,0 +1,49 @@
+import axios from "axios";
+import toast from "./toast.service";
+import {TokenService, ApiService} from '@/services';
+import store from "@/store"
+import router from '@/router'
+function errorResponseHandler(error) {
+    
+    // check for errorHandle config
+    if (
+        error.config.hasOwnProperty("errorHandle") &&
+        error.config.errorHandle === false
+    ) {
+        return Promise.reject(error);
+    }
+
+    // if has response show the error
+    if (error.response) {
+        if(typeof error.response.data.errors !== 'undefined') {
+            for (const key in error.response.data.errors) {
+                if (error.response.data.errors.hasOwnProperty(key)) {
+                    let title = (error.response.data.title) ? error.response.data.title : undefined;
+                    toast.error(error.response.data.errors[key], title);
+                }
+            }
+        }
+        if(error.response.status == 401) {
+            TokenService.removeToken();
+            TokenService.removeRefreshToken();
+            TokenService.removeInfo();
+            ApiService.removeAuthHeader();
+            store.commit('auth/logoutSuccess', {}, {root: true})
+            router.push({ name: `Dashboard` });
+        }
+        
+    }
+}
+function successHandler(response) {
+    if(response.status == 200) {
+        if(typeof response.data.message !== 'undefined') {
+            toast.success(response.data.message, response.data.title);
+        }
+    }
+    return response;
+}
+
+// apply interceptor on response
+axios.interceptors.response.use(successHandler, errorResponseHandler);
+
+export default errorResponseHandler;

resources/js/vue/Admin/services/global/toast.service.js

@@ -0,0 +1,21 @@
+import "izitoast/dist/css/iziToast.min.css";
+import iZtoast from "izitoast";
+
+const toast = {
+    error: (message, title = "Error") => {
+        return iZtoast.error({
+            title: title,
+            message: message,
+            position: "bottomCenter"
+        });
+    },
+    success: (message, title = "Success") => {
+        return iZtoast.success({
+            title: title,
+            message: message,
+            position: "bottomCenter"
+        });
+    }
+};
+
+export default toast;