VueAuth is based on Vue 3 with composition style codes

Getting started

Lets install vue-auth with npm

npm install --save pinia vue @musasutisna/vue-axios @musasutisna/vue-auth

Configuration

window.config.VUE_AUTH = {
  API_BASEURL: 'your api baseurl',
  API_LOGIN: '/login',
  API_RECOVERY: '/recovery',
  API_LOGOUT: '/u/logout',
  API_VERIFY: '/u/profile',
  AUTH_STORE: 'localStorage',
  AUTH_KEY: 'token',
  TOKEN: 'your auth token'
}

| Property | Type | Default | Description | |:--|:--|:--|:--| | API_BASEURL | String | /api/v1 | Baseurl of api auth. | | API_LOGIN | String | /login | Endpoint of api auth login. | | API_RECOVERY | String | /recovery | Endpoint of api auth recovery. | | API_LOGOUT | String | /logout | Endpoint of api auth logout. | | API_VERIFY | String | /u/profile | Endpoint of api auth verify. | | AUTH_STORE | String | localStorage | Method to store token localStorage or sessionStorage. | | AUTH_KEY | String | token | The unique key id of store. | | TOKEN | String | null | Initial auth token. |

Locale

| Keys | Default | |:--|:--| | VUE_AUTH_LOGIN_PROCESS | loading message of login process. | | VUE_AUTH_RECOVERY_PROCESS | loading message of recovery process. | | VUE_AUTH_VERIFY_PROCESS | loading message of verify process. | | VUE_AUTH_LOGOUT_PROCESS | loading message of logout process. |

Composables

Axios

• useAxiosAuth, axios instance for auth api.

Apis

• useApiAuth, axios configured of auth with configured baseUrl and header authorization with Bearer.

| Method | Type | Description | |:--|:--|:--| | endpoints | Object | list api endpoints. | | toLogin | async | Send request login. | | toRecovery | async | Send request recovery. | | toVerify | async | Send request auth verify. | | toLogout | async | Send request auth logout. |

Stores

• useAuthStore, manage result response of api request data.

| Property | Type | Description | |:--|:--|:--| | data | Object | Result data response from request login or verify on executed. | | setData | function | set current result data response. |

Components

• VueAuth, verify user authorization on token is exists.

| Props | Type | Description | |:--|:--|:--| | class | String | Class value attributes will be bind into element. |

| Emit | Type | Description | |:--|:--|:--| | verified | function | Executed when verified process is completed |

• VueProtect, verify user authorization.

| Props | Type | Description | |:--|:--|:--| | class | String | Class value attributes will be bind into element. |

| Emit | Type | Description | |:--|:--|:--| | verified | function | Executed when verified process is completed |