我的索引路由定义为：
{ 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创建了一些示例