Vue Router Guards
This is a package with 2 vue-router guards:
- Authorization Guard
- Access Guard
Authorization Guard
This guard is used to check user's authorization status before resolving any route
Example
// vue-router.js ;; ;;; ; Vue; const router = routes; /** * ============= * Global hooks * ============= * * Set global hooks for vue-router */ /* * Set guard to check authorized status */router;
Arguments
to
— the target Route Object being navigated to (standard vue-router argument)from
— the current route being navigated away from (standard vue-router argument)next
— this function must be called to resolve the hook (standard vue-router argument)options
— object with authorization guard configurationredirect
- redirect to auth page for authorization check's fail (you can pass any valid location object)hasSession
— boolean, check if user has session (in cookies for example). If it is false — redirect to auth pageisAuthorized
— boolean, check if user is already authorized in application (take from store or cookies for example ). If it is false — try to get user data,getUser
— function-Promise with resolve/reject status for fetching user data (get from API and save it in store for example). Resolve — go next(), reject — redirect to auth page
Access Guard
This guard is used to check access to route
- You should pass user's rights
- You should set additional
meta
data in your routes
It is not necessary to set
access
data on all your nested routes - guard will try to find missing data from parent routes and use them
Example
// vue-router.js ;; ; ; Vue; const router = routes; /** * ============= * Global hooks * ============= * * Set global hooks for vue-router */ /* * Set guard to check rights access */router;
Arguments
to
— the target Route Object being navigated to (standard vue-router argument)from
— the current route being navigated away from (standard vue-router argument)next
— this function must be called to resolve the hook (standard vue-router argument)options
— object with authorization guard configurationredirect
- redirect to 404 page in case of access check's fail (you can pass any valid location object)isAuthorized
— boolean, check if user is already authorized in application (take from store or cookies for example )rights
— object with user's rights
User's rights
You need to provide an object with user's rights
const rights = 'scheduler': // is component key in meta.access 'main': // is module key in meta.access 'show': true // is action key in meta.access (true — access, false (or not exists) — restricted) 'tasks': 'results': false // (or not exists)
Route's meta
path: '/auth' name: 'system.auth' meta: public: true // public route -> access without authorization or special rights path: '/' name: 'dashboard' meta: authorized: true // access only for authorized users but without special rights path: '/scheduler' name: 'scheduler' meta: access: // special rights for this route will be used component: 'scheduler' module: 'main' action: 'show' children: path: 'tasks/:id(\\d+)?' name: 'scheduler.tasks' meta: // no need to set access object -> guard will use data from parent (`scheduler` route) children: path: 'add' name: 'scheduler.tasks.add' meta: access: // special rights for this route will be used component: 'scheduler' module: 'tasks' action: 'add' path: 'result' name: 'scheduler.tasks.result' meta: // no need to set access object -> guard will use data from parent (`scheduler` route)