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({
...
})
由于已经使用元素的显示控制，一般来说，就不存在数据权限调用的问题，因为元素都不显示了，就没有操作的机会，而且后台会对用户的请求的进行权限的过滤，但是还是得对请求失败进行处理
未完待续...
