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