VueJS 2，路由器守卫

Question

我的索引路由定义为：

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

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

export default routes;

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

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

Answer 1

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

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

检查路由的管理员权限：

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.
  }
}

更多请查看docs and I created little example on jsFiddle

VueJS 2，路由器守卫

VueJS 2, router guard

javascript

vue-router

vuejs2