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！～ 大功告成～