@oniti/quasar-app-extension-vlank-auth
v3.2.13
Published
Authentification
Downloads
117
Keywords
Readme
Vlank Auth
Manage authentication
Provides :
- login page
- helpers (get user, rights, disconnect, …)
Install
quasar ext add @oniti/vlank-auth
Uninstall
quasar ext remove @oniti/vlank-auth
Update
yarn upgrade @oniti/vlank-auth
Settings
See also settings in quasar.extensions.json
(created on install).
You can override default login page by creating your own /auth/login
/ loginRoute / defaultAuthRoute route.
You can copy Login.vue as a template for your page.
The default page use email
and password
as credentials.
Configuration
chainWebpack(chain) {
chain.resolve.alias.merge({
"vlank-auth-logo": path.resolve(
__dirname,
"src/assets/logo-app.png"
),
"vlank-auth-logo-text": path.resolve(
__dirname,
"src/assets/logo-app-text.png"
),
"vlank-auth-layout": path.resolve(
__dirname,
"src/layouts/EmptyLayout.vue"
)
});
}
Custom route validation
You can define a custom function to check route access.
in quasar.conf.js
boot: [...,'override-check-route-access'],
...,
framework:{
...,
config:{
onitiVlankAuth: {
check_route_access_overide_name: "$vlankAuthCheckAccessRoute"
},
...
}
}
override-check-route-access.js
import { boot } from 'quasar/wrappers'
export default boot(({ app }) => {
app.config.globalProperties.$vlankAuthCheckAccessRoute = (user, to) => {
return true
}
})
Usage
Just add requieresAuth as meta on route to require an auth.
Route example:
{
path: '/',
meta: {
requiresAuth: true,
// loginRoute: '/auth/login', // optional, defaultAuthRoute otherwise
// redirectRoute : '/', // optional, defaultRedirectRoute otherwise
// passwordLostRoute : '/', // optional, defaultPasswordLostRoute otherwise
// passwordCreateRoute : '/', // optional, defaultpasswordCreateRoute otherwise
rights : ['admin-panel'] // optional
logoutOnUnsufisantRights: true, // optional
},
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') }
]
}
Meta settings
| Name | Purpose | | ---- | ------- | | requiresAuth | Auth is required for this route and its children | | loginRoute | Override default login route | | redirectRoute | Override default "home" route | | passwordLostRoute | Override default "passwordLostRoute" route | | passwordCreateRoute | Override default "passwordCreateRoute" route | | rights | array of required rights, a message will pop if any right is missing! | | typeRightCheck | string, "any" or "all" define if all rights are requiered or only one | | logoutOnUnsufisantRights | self explaining :) |
Helpers
The authentication logic is performed inside a Vuex store. you can provide an helper to access the functionality in the store. Les helpers sont accessibles depuis le composant après avoir fait un inject :
import { inject } from 'vue'
const $auth = inject('vlank-auth')
| Function | General purpose |
| --------- | ------------- |
| $auth.logout() | Logs out the current user |
| $auth.check(right) | Checks if the user belongs to right
(string) |
| $auth.checkAll(rights) | Checks if the user belongs to every rights
(array of string) |
| $auth.checkAny(rights) | Checks if the user belongs to any rights
(array of string) |
| $auth.user() | Returns the current user (no request is sent to the back) |
| Function | Specific purpose |
| --------- | ------- |
| $auth.login(data) | POST data
(ex: login+password) to the login route, saves the returned token
in a cookie |
| $auth.fetch() | Request the backend to check if we're still authentified |
| $auth.updatePassword(data) | Update current User password |
| $auth.resetPassword(data) | Reset User password |
| $auth.passwordLost(data) | Send mail to current User to reset his password |
| $auth.updateUser(data) | Update current User informations |
| $auth.getRedirectRoute() | Return last visited route (or redirectRoute if none) |
| $auth.getLoginRoute() | return current Login Route (loginRoute / defaultAuthRoute) |
| $auth.getWantedRoute() | return previously "forbidden" route |
| $auth.isFunctionalRoute(routePath) | Check the route is a functionnal route (Login Route, PasswordCreate Route or PasswordLost Route) |
Optionnal extension configuration
The following keys are not prompted during the installation process, but can be added to quasar.extensions.json
:
| Key | Purpose |
| --- | ------- |
| disableLostPassword
| Disable the "lost password" button |
| hideBottomTextLogo
| Hide the "text logo" at the bottom of pages |
TODO
- add "rightOperator" (AND/OR)?
- messages customisation
- allow to configure backend routes
- component : logout button
- component : my account