github:https://github.com/HuaRongSAO/vue-admin
權限管理
什么是訪問權限，我大致分為兩部分：
- 服務器api訪問權限（不歸前端，先不管）
- 前端的頁面訪問、dom元素的展示、數據的請求
我們重點講一下前端開發的權限管理。
前端權限控制
我把它分成兩部分：
1、頁面級別的訪問權限
2、元素級別的訪問權限
1、頁面級別的路由管理
頁面級別的路由管理，我們通常采用，vue-route的beforeEnter來進行管理
store.js 使用vuex緩存user
const store = new Vuex.Store({
state: {
user: {
...
promise:['isUser','isMaster','isAdmin'] //擁有什么權限
}
},
getters：{
user: state => state.user,
promise: state => state.user.promise
},
})
使用route管理頁面跳轉
// 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']//獲取用戶權限
const acl = ['isUser'] //權限控制 考慮到用戶可能擁有多個權限
const isPromise = unique(promise, acl)
if (isPromise) {
next()
} else {
console.log('你沒有訪問權限')
router.push({name: 'login'}) //沒有權限就跳轉
}
}
// 對比數組
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指令來優雅的處理權限
tempalte
<div v-promise="[’isUser‘]"></div>
<!-->v-promise 傳入數組 表示有那些權限的用戶可以展示<-->
核心代碼 directive.js
import Vue from 'vue'
import store from './store'
const promiseDerective = Vue.directive('promise', (el, binding, vnode, oldVnode) => {
const promise = store.getters['promise'] // 獲取用戶權限
const acl = ['isUser', 'isAdmin']
unique (acl, promise) ？el.style = 'display:true'： el.style = 'display:none'//這邊有個小問題v-if的實現原理不知 只能用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({
...
})
由于已經使用元素的顯示控制，一般來說，就不存在數據權限調用的問題，因為元素都不顯示了，就沒有操作的機會，而且后臺會對用戶的請求的進行權限的過濾，但是還是得對請求失敗進行處理
未完待續...
