My index route is defined as:

{ path: '/', adminOnly: false, ponent: Main },

Is there a way to access the 'adminOnly' property?

There seems to be no way of doing so in this block of code:

routes.beforeEach((to, from, next) => {
    console.log(to)
    next();
});

My routes file:

import Vue from 'vue';
import VueRouter from 'vue-router';

import Main from '../ponents/Main.vue';
import About from '../ponents/About.vue';

const NotFoundException = {
    template: '<div>Route Was Not Found</div>'
};

Vue.use(VueRouter);

const routes = new VueRouter({
    mode: 'history',
    hashbang: false,
    linkActiveClass: 'active',
    base: '/jokes',
    routes: [
        { path: '/', adminOnly: false, ponent: Main },
        { path: '/about', adminOnly: false, ponent: About },
        { path: '*', adminOnly: false, ponent: NotFoundException }
    ]
});
routes.mode = 'html5';

routes.beforeEach((to, from, next) => {
    // CHECK IF ADMINONLY EXISTS
    next();
});

export default routes;

I did get a solution by adding a mixin of adminOnly.js which has the following code in it: But then again, the mixin has to be added to each ponent if I was to redirect the user to the login page if not admin. //Just a test var isAdmin = false;

export default {
        beforeRouteEnter (to, from, next) {
            if(!isAdmin) {
                next((vm) => {
                   vm.$router.push('/login');
                });
            }
        }
    }

My index route is defined as:

{ path: '/', adminOnly: false, ponent: Main },

Is there a way to access the 'adminOnly' property?

There seems to be no way of doing so in this block of code:

routes.beforeEach((to, from, next) => {
    console.log(to)
    next();
});

My routes file:

import Vue from 'vue';
import VueRouter from 'vue-router';

import Main from '../ponents/Main.vue';
import About from '../ponents/About.vue';

const NotFoundException = {
    template: '<div>Route Was Not Found</div>'
};

Vue.use(VueRouter);

const routes = new VueRouter({
    mode: 'history',
    hashbang: false,
    linkActiveClass: 'active',
    base: '/jokes',
    routes: [
        { path: '/', adminOnly: false, ponent: Main },
        { path: '/about', adminOnly: false, ponent: About },
        { path: '*', adminOnly: false, ponent: NotFoundException }
    ]
});
routes.mode = 'html5';

routes.beforeEach((to, from, next) => {
    // CHECK IF ADMINONLY EXISTS
    next();
});

export default routes;

I did get a solution by adding a mixin of adminOnly.js which has the following code in it: But then again, the mixin has to be added to each ponent if I was to redirect the user to the login page if not admin. //Just a test var isAdmin = false;

export default {
        beforeRouteEnter (to, from, next) {
            if(!isAdmin) {
                next((vm) => {
                   vm.$router.push('/login');
                });
            }
        }
    }

• javascript
• vuejs2
• vue-router

Share Improve this question Follow asked Jan 10, 2017 at 1:34 Paul DiamantPaul Diamant 18933 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Yes there is better way to handle this. Every route object can have meta field. Just wrap adminOnly property in meta object:

 routes: [
        { path: '/', meta: { adminOnly: false }, ponent: Main },
        { path: '/about', meta: { adminOnly: false }, ponent: About },
        { path: '*', meta: { adminOnly: false }, ponent: NotFoundException }
    ]

Check route for admin rights:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.adminOnly)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
  }
}

For more please check docs and I created little example on jsFiddle