init project

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

@@ -0,0 +1,93 @@
+import axios from 'axios'
+import { TokenService } from './storage.service'
+import store  from '@/store'
+
+const ApiService = {
+
+    init(baseURL) {
+        axios.defaults.baseURL = baseURL;
+    },
+
+    setHeader() {
+        axios.defaults.headers.common["Authorization"] = `Bearer ${TokenService.getToken()}`
+    },
+
+    removeHeader() {
+        axios.defaults.headers.common = {}
+    },
+
+    get(resource) {
+        return axios.get(resource)
+    },
+
+    post(resource, data) {
+        return axios.post(resource, data)
+    },
+
+    put(resource, data) {
+        return axios.put(resource, data)
+    },
+
+    delete(resource) {
+        return axios.delete(resource)
+    },
+
+    /**
+     * 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('/o/token/')) {
+                     // Refresh token has failed. Logout the user
+                     store.dispatch('auth/logout')
+                     throw error
+                 } else {
+                     // Refresh the access token
+                     try{
+                         await store.dispatch('auth/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/services/auth/storage.service.js

@@ -0,0 +1,37 @@
+const TOKEN_KEY = 'access_token'
+const REFRESH_TOKEN_KEY = 'refresh_token'
+
+/**
+ * Manage the how Access Tokens are being stored and retreived from storage.
+ *
+ * Current implementation stores to localStorage. Local Storage should always be
+ * accessed through this instace.
+**/
+const TokenService = {
+    getToken() {
+        return localStorage.getItem(TOKEN_KEY)
+    },
+
+    saveToken(accessToken) {
+        localStorage.setItem(TOKEN_KEY, accessToken)
+    },
+
+    removeToken() {
+        localStorage.removeItem(TOKEN_KEY)
+    },
+
+    getRefreshToken() {
+        return localStorage.getItem(REFRESH_TOKEN_KEY)
+    },
+
+    saveRefreshToken(refreshToken) {
+        localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken)
+    },
+
+    removeRefreshToken() {
+        localStorage.removeItem(REFRESH_TOKEN_KEY)
+    }
+
+}
+
+export { TokenService }

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

@@ -0,0 +1,104 @@
+import ApiService from './api.service'
+import { TokenService } from './storage.service'
+
+
+class AuthenticationError extends Error {
+    constructor(errorCode, message) {
+        super(message)
+        this.name = this.constructor.name
+        this.message = message
+        this.errorCode = errorCode
+    }
+}
+
+const UserService = {
+    /**
+     * Login the user and store the access token to TokenService.
+     *
+     * @returns access_token
+     * @throws AuthenticationError
+    **/
+    login: async function(cell_number, password) {
+        const requestData = {
+            method: 'post',
+            url: "login",
+            data: {
+                cell_number,
+                password,
+                grant_type: 'password',
+            },
+            auth: {
+                username: process.env.VUE_APP_CLIENT_ID,
+                password: process.env.VUE_APP_CLIENT_SECRET
+            }
+        }
+
+        try {
+            const response = await ApiService.customRequest(requestData);
+            TokenService.saveToken(response.data.token);
+            TokenService.saveRefreshToken(response.data.token);
+            ApiService.setHeader();
+
+            // NOTE: We haven't covered this yet in our ApiService
+            //       but don't worry about this just yet - I'll come back to it later
+            ApiService.mount401Interceptor();
+
+            return response.data.access_token;
+        } catch (error) {
+            throw new AuthenticationError(error.response.status, error.response.data.detail);
+        }
+    },
+
+    /**
+     * Refresh the access token.
+    **/
+    refreshToken: async function() {
+        const refreshToken = TokenService.getRefreshToken()
+
+        const requestData = {
+            method: 'post',
+            url: "login",
+            data: {
+                grant_type: 'refresh_token',
+                refresh_token: refreshToken
+            },
+            auth: {
+                username: process.env.VUE_APP_CLIENT_ID,
+                password: process.env.VUE_APP_CLIENT_SECRET
+            }
+        }
+
+        try {
+            const response = await ApiService.customRequest(requestData)
+
+            TokenService.saveToken(response.data.token)
+            TokenService.saveRefreshToken(response.data.token)
+            // Update the header in ApiService
+            ApiService.setHeader()
+
+            return response.data.access_token
+        } catch (error) {
+            throw new AuthenticationError(error.response.status, error.response.data.detail)
+        }
+
+    },
+
+    /**
+     * Logout the current user by removing the token from storage.
+     *
+     * Will also remove `Authorization Bearer <token>` header from future requests.
+    **/
+    logout() {
+        // Remove the token and remove Authorization header from Api Service as well
+        TokenService.removeToken()
+        TokenService.removeRefreshToken()
+        ApiService.removeHeader()
+
+        // NOTE: Again, we'll cover the 401 Interceptor a bit later.
+        ApiService.unmount401Interceptor()
+    }
+}
+
+export default UserService
+
+export { UserService, AuthenticationError }

resources/js/vue/services/index.js

@@ -0,0 +1,3 @@
+export * from './auth/api.service';
+export * from './auth/storage.service';
+export * from './auth/user.service';