后台系统几乎都会涉及权限管理,实现的方式有蛮多的,只是前端只能做样子货,最终的权限管理还是得后台做。今天说说自己认知的权限管理的几个方式。
先说说一般后台要做的权限,接口级别,后台需要对每个接口都做权限,当这个用户没有对这个接口操作的权限(一般就是增删改查),应该返回一个约定好的code,让前端知道没有权限,然后前端通过这个code去做一些友好的提示。不要觉得后台做这个很麻烦,不说后台必须做,就我做个的几个系统,Java和php还有.net应该都有现成的机制去做,应该说是标配。
接着就是前端显示和操作的权限了。先说刚说的code返回的操作,一般项目都会封装一个全局的请求,axios还是fetch还是ajax(如果没有,当我没说),所以全局拦截约定好的code,没权限的是要弹窗提示还是跳转暂无权限的页面。
按钮权限:
按钮的权限也很简单,就是控制显示隐藏,后台会给按钮权限的字段,可以约定好格式。jq可以移除没有权限的dom,vue原理用的是v-if,也可以自己写个指令,其实原理也是v-if,通过el.remove()方法移除这个没有权限的按钮。react也很简单,本身就是js,直接操作。这只是显示层面的,但是如果有人直接调用接口,还是得后台拦截,前端只是做一层显示层面的权限。
菜单权限:
菜单权限方式就多了,一般后台会返回菜单的列表,你要自己处理组装成你的展示结构,这边以vue为主说几个方式。
1:请求拦截:
显示了后台返回的菜单,不做其他操作,就是只通过接口拦截做权限控制,最简单,效果也挺好,不需要那么多乱七八糟的逻辑,我最喜欢的方式。
2:路由拦截:
在路由前置钩子进行判断,判断即将进入的页面是否在返回的列表里面,可以防止那些记住页面地址,但是没有这个菜单的情况进行拦截。
let havePemission = {
'/': true,
'/about1': true
}
router.beforeEach((to, from, next) => {
if(havePemission[to.path]){
next()
}
})
这边只是简单提一下,权限的可以是后台返回,也可以是自己组装,一般存储在本地或者vuex。
3:动态路由:
vue提供的addRoutes可以实现,只是现在不支持删除和刷新,可以在路由拦截里面做:
let haveAdd = false;
router.beforeEach((to, from, next) => {
if(!haveAdd){
let defaultRouter = [{
path: '/about1',
name: 'About1',
component: () => import(/* webpackChunkName: "about1" */ '../views/About1.vue')
},
{
path: '/about2',
name: 'About2',
component: () => import(/* webpackChunkName: "about2" */ '../views/About2.vue')
}]
haveAdd = true;
router.addRoutes(defaultRouter);
}
next()
})
一定要有个标识,否在会报重复name的错,如果刷新了标识重置也是可以的。这边是把数据写死,一般会存储在本地,也可以存储在vuex,对异步要根据实际情况处理。
其实权限管理用来用去就这几个组合,优缺点都有,但是最终还是后台要做好,前端只是显示做一做权限。比如不是动态路由,那么用户记住一些没有权限进入的地址是一种情况,动态路由,暂时不支持刷新和删除,初始化之后如果要做一些操作就不好操作了,除非手动刷新。然后每次都要在路由守卫里面进行判断,也是缺点。优点就是体验好一些,不需要等请求返回。还是最喜欢请求拦截那个方式。
(完)
Coding 个人笔记