vue-and-router-guards

1.0.1 • Public • Published

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
 
import Vue from 'vue';
import VueRouter from 'vue-router';
 
import cookies from 'js-cookie';
import configs from "@configs";
import store from '@store';
 
import {authCheckGuard} from 'vue-and-router-guards'
import routes from './routes';
 
Vue.use(VueRouter);
 
export const router = new VueRouter({routes});
 
 
/**
 * =============
 * Global hooks
 * =============
 *
 * Set global hooks for vue-router
 */
 
/*
 * Set guard to check authorized status
 */
router.beforeEach((to, from, next) => authCheckGuard(to, from, next, {
 
    // Set redirect to auth
    redirect: {name: 'system.auth', replace: true},
 
    // Has client session or not
    hasSession: !!cookies.get(configs.cookieSession),
 
    // Check if authorized or not
    isAuthorized: store.getters['account/authorized'],
 
    // Send action to get user data
    // Return promise
    getUser: (next, redirect) => {
        return new Promise((resolve, reject) => {
                store
                    .dispatch('account/user')
                    .then(_ => store.getters['account/authorized'] === true ? resolve() : reject())
            }
        )
    }
}));
 
 

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 configuration
    • redirect - 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 page
    • isAuthorized — 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
 
import Vue from 'vue';
import VueRouter from 'vue-router';
 
import store from '@store';
 
import {rightsCheckGuard} from 'vue-and-router-guards'
import routes from './routes';
 
Vue.use(VueRouter);
 
export const router = new VueRouter({routes});
 
/**
 * =============
 * Global hooks
 * =============
 *
 * Set global hooks for vue-router
 */
 
/*
 * Set guard to check rights access
 */
router.beforeEach((to, from, next) => rightsCheckGuard(to, from, next, {
 
    // Set redirect to 404 page
    redirect: {name: 'system.404', replace: true},
 
    // Check if authorized or not
    isAuthorized: store.getters['account/authorized'],
    
    // Get user's rights
    rights: store.getters['account/rights'],
}));
 

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 configuration
    • redirect - 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

 
export default  [
    {
        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)
                        }
                    },
                ]
            }
        ]
    },    
]
 
    

Package Sidebar

Install

npm i vue-and-router-guards

Weekly Downloads

14

Version

1.0.1

License

MIT

Unpacked Size

113 kB

Total Files

7

Last publish

Collaborators

  • pavelshar