github:https://github.com/HuaRongSAO/vue-admin

權(quán)限管理

什么是訪問權(quán)限，我大致分為兩部分：

• 服務(wù)器api訪問權(quán)限（不歸前端，先不管）
• 前端的頁面訪問、dom元素的展示、數(shù)據(jù)的請求
  我們重點講一下前端開發(fā)的權(quán)限管理。

前端權(quán)限控制

我把它分成兩部分：
1、頁面級別的訪問權(quán)限
2、元素級別的訪問權(quán)限

1、頁面級別的路由管理

頁面級別的路由管理，我們通常采用，vue-route的beforeEnter來進行管理

store.js 使用vuex緩存user

const store = new Vuex.Store({
  state: {
    user: {
      ...
      promise:['isUser','isMaster','isAdmin'] //擁有什么權(quán)限
    }
  },
  getters：{
    user: state => state.user,
    promise: state => state.user.promise
  },
})

使用route管理頁面跳轉(zhuǎn)

// router.js
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'index',
      component: Hello,
      beforeEnter: checkAuth，
      childrens:[
        ...
      ]
    }
  ]
})

export function checkAuth (to, from, next) {
  const promise = router.app.$options.store.getters['promise']//獲取用戶權(quán)限
  const acl = ['isUser'] //權(quán)限控制 考慮到用戶可能擁有多個權(quán)限
  const isPromise = unique(promise, acl)
  if (isPromise) {
    next()
  } else {
    console.log('你沒有訪問權(quán)限')
    router.push({name: 'login'}) //沒有權(quán)限就跳轉(zhuǎn)
  }
}
// 對比數(shù)組
function unique(arr1, arr2) {
  for (const item of arr1) {
    if (arr2.indexOf(item) > -1) return true
  }
  return false
}

2、元素級別的顯示控制

通常我們都是直接使用v-if在控制,但是所有的頁面都一次次的去獲取 this.$store.getters['promise'] 會顯得麻煩，而且頁面不整潔。在這里我采用Vue.directive指令來優(yōu)雅的處理權(quán)限

tempalte

<div v-promise="[’isUser‘]"></div>
<!-->v-promise 傳入數(shù)組 表示有那些權(quán)限的用戶可以展示<-->

核心代碼 directive.js

import Vue from 'vue'
import store from './store'

const promiseDerective = Vue.directive('promise', (el, binding, vnode, oldVnode) => {
    const promise = store.getters['promise'] // 獲取用戶權(quán)限
    const acl = ['isUser', 'isAdmin']
    unique (acl, promise) ？el.style = 'display:true'： el.style = 'display:none'//這邊有個小問題v-if的實現(xiàn)原理不知 只能用v-show的方法
  }
)
function unique(arr1, arr2) {
  for (const item of arr1) {
    if (arr2.indexOf(item) > -1) return true
  }
  return false
}

export default promiseDerective

main.js

import promiseDerective from './directive.js'
promiseDerective //添加指令到Vue
new Vue({
  ...
})

由于已經(jīng)使用元素的顯示控制，一般來說，就不存在數(shù)據(jù)權(quán)限調(diào)用的問題，因為元素都不顯示了，就沒有操作的機會，而且后臺會對用戶的請求的進行權(quán)限的過濾，但是還是得對請求失敗進行處理
未完待續(xù)...