vue router 权限

背景：vue + vue router 通过登录的权限去判断页面的权限，比如管理员能查看A和B页面，而           普通用户只能查看A页面。查了很多资料都用的是动态路由，但是我没有用那个去实               现，    这里简单介绍一下我的方法吧，主要用到的是路由的 meta 属性以及钩子函数。

解决方法：

1.在 router/index.js 中配置路由的权限，使用 meta 属性

{
      path: '/admin',
      name: 'admin',
      component: admin,
      meta: {
        role: 'admin'    // 只有权限为 admin 的用户才能访问该路由
      }
    },
复制代码

2.在 main.js 使用钩子函数

router.beforeEach((to, from, next) => {   // 在更新路由之前判断是否有 meta 属性
  if (to.path === '/') {   // 如果是根路由，要单独写一个判断，否则会死循环
    next()
  }
  if (to.meta.role) { // 需要权限的页面
    if (to.meta.role === store.state.role) {  // 使用 vuex 储存 role
      next()
    } else {  // 权限不够的页面
      ElementUI.Message.error('抱歉，您将要访问的页面权限不够！')
      console.log('not permission');
      next({name: from.name})   // 如果将要访问的页面没有权限，则停留在当前的页面
    }
  } else {  // 不需要权限的页面
    next()
  }
})
复制代码

ok！～ 大功告成～