vue router 許可權

豬豬是天才發表於2018-12-17
Vue

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


相關文章