vue自定义指令和动态路由实现权限控制
功能概述：
- 根据后端返回接口，实现路由动态显示
- 实现按钮（HTML元素）级别权限控制
涉及知识点：
- 路由守卫
- Vuex使用
- Vue自定义指令
导航守卫
前端工程采用Github开源项目Vue-element-admin作为模板，该项目地址：Github|Vue-element-admin。
在Vue-element-admin模板项目的src/permission.js文件中，给出了路由守卫、加载动态路由的实现方案，在实现了基于不同角色加载动态路由的功能。我们只需要稍作改动，就能将基于角色加载路由改造为基于权限加载路由。
导航守卫：可以应用于在路由跳转时，对用户的登录状态或权限进行判断。项目中使用全局前置守卫。参考Vue官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
后台返回接口
权限系统后台采用基于角色的权限控制方案（role-basedaccesscontrol），如上图所示，
该用户信息接口将查询用户所具有的所有角色，再将这些角色的权限并集按照路由-操作整合在一起返回。在用户登录入系统后，我们从后台请求获得用户信息（个人信息+权限信息），作为全局属性储存在前端。不同权限的用户看到的页面不同，依赖于这些属性，它们决定了路由如何加载、页面如何渲染。
这种多个组件依赖一组属性的场景，Vue提供了VueX作为全局状态管理方案。
使用VueX存储权限信息
在src/store/moudules目录下定义permission.js
1.定义异步方法，方法内部包含HTTP请求从后台拉取数据
importhttpfrom'../../axios';
asyncfunctiongetUserInfo(){
constres=awaithttp.getUserInfo();
returnres;
}
使用await关键字，保证执行顺序正确。这里是为了保证能拿到接口返回的内容，以便于下一步处理。
constactions={
getPermissions({commit}){
returnnewPromise(resolve=>{
getUserInfo().then(res=>{
if(res){
letpermissionList=res.permissionList;
commit('SET_PERMISSIONS',permissionList);
//根据后台返回的路由，生成实际可以访问的路由
letaccessRoutes=filterAsyncRoutesByPermissions(asyncRoutes,permissionList);
commit('SET_ROUTES',accessRoutes);
commit('SET_USER_INFO',{name:res.name,accountName:res.accountName})
resolve(accessRoutes);
}else{
resolve([]);
}
}).catch(()=>resolve([]));
})
}
}
VueX中action定义异步方法。
2.定义静态、动态路由
src/router/index.js
静态路由：
exportconstconstantRoutes=[
{
path:'/redirect',
component:Layout,
hidden:true,
children:[
{
path:'/redirect/:path(.*)',
component:()=>import('@/views/redirect/index'),
},
],
,
...
{
path:'/404',
component:()=>import('@/views/error-page/404'),
hidden:true,
}
];
动态路由：
exportconstasyncRoutes=[
{
path:'/system',
component:Layout,
name:'系统管理',
meta:{title:'系统管理',icon:'el-icon-user',affix:true},
children:[
{
path:'/system',
component:()=>import('@/views/management/system/Index'),
meta:{title:'系统管理',icon:'el-icon-setting',affix:true},
},
],
}
...
]
静态路由中定义了所有用户均可访问的路由，动态路由中定义了动态加载的路由。
3.根据权限过滤并排序路由
exportfunctionfilterAsyncRoutesByPermissions(routes,menus){
constres=[]
routes.forEach(route=>{
consttmp={...route}
letindex=menus.map(menu=>menu.url).indexOf(tmp.path);
if(index!=-1){
//后端返回路由信息覆盖前端定义路由信息
tmp.name=menus[index].name;
//debugger;
tmp.meta.title=menus[index].name;
tmp.children.forEach(child=>{
if(child.path==tmp.path){
child.meta.title=tmp.meta.title;
}
})
res.push(tmp)
}
});
//根据返回菜单顺序，确定路由顺序
/**
*TODO子菜单排序
*/
res.sort((routeA,routeB)=>menus.map(menu=>menu.url).indexOf(routeA.path)-menus.map(menu=>menu.url).indexOf(routeB.path))
returnres
}
根据url匹配，匹配到url的路由则加入数组。最终用户可以访问的路由=允许访问的动态路由+不需要权限的静态路由。
4.src/permission.js中的处理逻辑
//引入store
importstorefrom'./store';
constwhiteList=['/login','/auth-redirect'];//noredirectwhitelist
//路由守卫
router.beforeEach(async(to,from,next)=>{
//startprogressbar
NProgress.start()
if(hasToken){
if(to.path==='/login'){
//...省略登出逻辑
NProgress.done();
}else{
//查看是否已缓存过动态路由
consthasRoutes=store.getters.permission_routes&&store.getters.permission_routes.length>0;
if(hasRoutes){
next();
}else{
try{
constaccessRoutes=awaitstore.dispatch('permission/getPermissions');
router.addRoutes(accessRoutes);
consttoRoute=accessRoutes.filter((route)=>route.path==to.path);
next({path:toRoute.length>0?toRoute[0].path:accessRoutes[0].path,replace:true});
}catch(error){
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
}
}else{
if(whiteList.indexOf(to.path)!==-1){
//inthefreeloginwhitelist,godirectly
next();
}else{
next(`/login?redirect=${to.path}`);
NProgress.done();
}
}
});
router.afterEach(()=>{
//finishprogressbar
NProgress.done();
});
以上是动态路由实现方案。
Vue支持自定义指令，用法类似于Vue原生指令如v-model、v-on等，网上查阅到的大部分细粒度权限控制方案都使用这种方法。下面将给出我的实现。
自定义指令
自定义指令v-permission：
src/directive/permission/index.js
importstorefrom'@/store'
exportdefault{
inserted(el,binding,vnode){
const{value}=binding
constpermissions=store.getters&&store.getters.permissions;
if(value){
//获取当前所挂载的vue所在的上下文节点url
leturl=vnode.context.$route.path;
letpermissionActions=permissions[url];
//console.log(permissionActions)
consthasPermission=permissionActions.some(action=>{
if(value.constructor===Array){
//或判断：只要存在任1，判定为有权限
returnvalue.includes(action);
}else{
returnaction===value;
}
})
if(!hasPermission){
el.parentNode&&el.parentNode.removeChild(el)
}
}else{
thrownewError(`needfurtherpermissions!`)
}
}
}
后端给出的权限数据是路由（url）与操作的对应Map，url可以通过将要挂载到的vnode属性拿到。这个方法有点类似于AOP，在虚拟元素挂载之后做判断，如果没有权限则从父元素上移除掉。
使用方法：
- 举例一：单个按钮（注意双引号套单引号的写法）
- 举例二：或判断（传入数组），只要拥有数组中一个权限，则保留元素，所有权限都没有，则移除。
在上一篇博客https://www.nhooo.com/article/194361.htm
下拉菜单上增加控制：
相应数据定义中增加action属性。
该方法无法覆盖所有场景，所以依然给出相应工具类：
/**
*
*@param{*当前页面路由}url
*@param{*操作codee.gop_add}value
*@returntrue/false是否有该项权限
*/
functioncheckPermission(url,value){
constpermissions=store.getters&&store.getters.permissions;
letpermissionActions=permissions[url];
if(!permissionActions){
returnfalse;
}
lethasPermission=permissionActions.some(action=>{
if(value.constructor===Array){
//或判断：只要存在任1，判定为有权限
returnvalue.includes(action);
}else{
returnaction===value;
}
});
returnhasPermission;
}
以上完成按钮粒度权限控制。
以上就是vue自定义指令和动态路由实现权限控制的详细内容，更多关于vue自定义指令和动态路由的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。