浅谈vue后台管理系统权限控制思考与实践
前言
最近在开发管理系统时遇到了任何管理系统都会有的需求---权限控制，之前也遇到过这种需求，但是架构不完善导致的各种问题使得后期维护非常麻烦，这一次的方案解决了之前的种种问题，现做一次记录，当然这个架构后期可能会有坑，不过得一步一步的尝试才能发现并解决问题。
权限控制需求
因为是单页面应用，路由交给前端来控制，对于一些需要特定权限才能查看的信息的保护变得尤为重要，如果前端不做好权限校验，后端也一时疏忽，就可能就会导致数据泄露。
对于权限控制，需求大致为如下：
- 对于大模块的限制，比如需要通过路由跳转的模块，这时需要进行路由拦截
- 对于小功能的限制，比如一个按钮，如果没有特定权限，那么这个按钮就不显示
安全层面的思考
之前接手了一个管理系统，前端是将权限列表存储在storage中来实现长久储存，这种实现方式是很不可取的，因为hacker可以通过手动更改存储的信息来实现获取特定权限，甚至系统都没有做路由拦截，如果知道模块的路由，可以直接通过输入路由信息来直接跳转到特定模块。对于一些模块的权限，权限被管理员修改后也无法立即生效，所以对于这几种情况做了如下思考与实践。
权限被管理员修改后立即生效
对于这个需求，我的做法是，获取到权限列表后，将权限信息存储在vuexstore中，并且使用getter函数，对于是否可以使用该权限进行判断，这样一旦权限数据更新，前端权限限制功能点会自动修改，从而做到权限的实时性，大致实现如下：
//vuexstate.js
exportdefault{
userPrivileges:{
admin:[],
purchaser:[]
},//用户权限信息
}
//vuexgetters.js
exportdefault{
canIUse:state=>(role,id)=>state.userPrivileges[role].includes(id)
}
//页面具体小功能，通过mapGetters引入canIUse函数
{{scope.row.allocation_subtotal}}
这样一来，数据存储在内存中，那么权限信息就无法轻易的被修改，同时对于权限的判断也非常简单，只需要在特定功能点传入功能点的权限id就能判断是否可以使用这个权限了。
但是将数据存储在了内存中也会遇到一个问题，页面刷新怎么办？接下来就是讲解这种情况。
刷新页面也可以进行权限判断
对于大模块的权限拦截，肯定是通过路由钩子来进行拦截的（这种实现有很多文章讲解过，这里不具体讲解），但是通过路由钩子进行拦截的前提是，权限信息得提前存在。
刷新页面会存在这种情况，页面刷新时，先执行的路由钩子，再执行的组件生命周期钩子来请求权限的列表，此时权限信息不存在，那么页面跳转到登陆页的话，体验就不够友好。
所以我的做法是，建立一个中间页，如果权限校验不通过，那么跳转至中间页，中间页进行权限的请求，请求到权限后，再判断是否可以跳转，这样的话，刷新页面体验就比较好。大致代码如下：
//vuexactions.js
//通过返回一个promise，使得store更新与后续代码变为“同步”执行
exportdefault{
getUserPrivileges({commit}){
returnfetch.get({
url:'/currentstaff'
}).then(data=>{
commit('SET_USER_PRIVILEGES_INFO',data.data)
returndata.data
}).catch(e=>{
})
}
}
//router.js
//需要验证权限的路由
{
path:'suppliers',
component:Suppliers,
meta:{
role:'admin',
privilegeId:5
}
}
functionisCanUseThisModule(to,from){
returnto.matched.every(record=>{
//利用路由meta存储相应权限信息
if(record.meta.role){
returnstore.getters.canIUse(record.meta.role,record.meta.privilegeId)
}else{
returntrue//如果不需要权限，直接返回true
}
})
}
router.beforeEach((to,from,next)=>{
if(isCanUseThisModule(to,from)){
next()//权限验证通过，跳转下一路由
}else{
next({
path:'/main/privilegeValidator'//权限验证不通过时的中间页
})
}
})
//权限校验中间页代码示例
created(){
this.$store.dispatch('getUserPrivileges').then(data=>{
for(leti=0;ivalue.privilegeId===data.admin_permissions[i]).linkHref
})
return
}
}
this.$router.push('/login')//如果没有任何权限，则跳转登陆页面
})
}
用户在登陆后也可以跳转到这个权限中间页，进行权限判断后再跳转到对应模块。
尾声
大致的实现过程就是这样，希望对大家有所帮助，如果有暗坑还请指出。也希望大家多多支持毛票票。