javascript – VueJS 2,路由器后卫

我的索引路由定义为：

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

有没有办法访问’adminOnly’属性？

在这段代码中似乎没有办法这样做：

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

我的路线档案：

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

import Main from '../components/Main.vue';
import About from '../components/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: '/',{ path: '/about',component: About },{ path: '*',component: NotFoundException }
    ]
});
routes.mode = 'html5';

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

export default routes;

我确实通过添加一个adminOnly.js的混合物来获得解决方案,其中包含以下代码：
但是,如果我要将用户重定向到登录页面(如果不是管理员),则必须将mixin添加到每个组件中.
//只是一个测试
var isAdmin = false;

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

解决方法

是的,有更好的方法来处理这个问题.每个路由对象都可以有元字段.只需在Meta对象中包装adminOnly属性：

routes: [
        { path: '/',Meta: { adminOnly: false },component: NotFoundException }
    ]

检查管理员权限的路线：

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

有关更多信息,请查看docs,我在jsFiddle创建了一些示例

原文地址：https://www.jb51.cc/js/150961.html