后台管理系统一般都会有权限模块,用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。
左边为菜单,分为两级,右边为图表显示区域,有增删改查的按钮。
表的结构
设置名字utf8mb4;
设置FOREIGN_KEY_CHECKS=0;
-- ----------------------------
——为t_auth_rule表结构
-- ----------------------------
删除表如果存在“t_auth_rule”;
创建表“t_auth_rule”(
id_pk的bigint (20) NOT NULL AUTO_INCREMENT,
‘auth_id varchar (128) NOT NULL评论“权限Id”,
pauth_id的varchar(128)默认空评论的父级Id”,
‘auth_name varchar (255) NOT NULL评论“权限名称”,
“auth_icon”varchar (255) NOT NULL评论“权限图标”,
auth_type的短整型(6)NOT NULL评论“权限类型,有些表示其属性\ r \ n 0 x00表示可显示的菜单权限节点。\ r \ n 0 x01表示普通节点”,
auth_condition文本评论的条件,
“备注”varchar(255)默认空评论“备注”,
is_menu的短整型(255)默认“0”评论“是否为菜单,0表示非,1表示是”,
“体重”int (11) NOT NULL默认“0”评论“权重”,
“规则”varchar(256)默认空评论“规则路径主要对应菜单或方法的路径名称”,
“cr_time”默认时间戳NOT NULL CURRENT_TIMESTAMP评论“创建时间”,
“up_time”默认时间戳NOT NULL CURRENT_TIMESTAMP>
addRouters (menuMap) {
让routerArr=[];
(让j=0;j & lt;routerList.length;j + +) {
让obj;
如果(menuMap [' AuthRule:: ' + routerList [j] .path)){//找到一级菜单
obj={
路径:routerList [j] .path,
组件:routerList [j] .component,
重定向:routerList [j] .redirect,
名称:routerList [j] . name,
元:routerList [j] .meta,
孩子们:[]
};
如果(routerList [j] .children.length) {
(让k=0;k & lt;routerList [j] .children.length;k + +) {
让_fullpath=routerList [j]定格[k] .path
如果(routerList [j]定格[k] .meta) {
_fullpath=routerList [j]定格[k] .meta。parentPath +‘/? _fullpath
}
如果(menuMap [' AuthRule:: ' + _fullpath]){//找到二级菜单
obj.children.push (routerList [j]定格[k]);
}
}
}
}
如果(obj) {
routerArr.push (obj);
美元。router.options.routes.push (obj);
}
}
存储。集(“routerArr routerArr);
美元。router.addRoutes (routerArr);
美元。路由器。推动({路径:"});
},
menuMap为登录时获取的权限菜单,是一个对象,routerList为前端定义的路由表;遍历routerList,如果routerList的关键在menuMap里能找到的话,就表示该路由存在。最后生成一个过滤后的路由表,用vue提供的addRoutes方法动态添加到路由中,并把过滤后的路由表存到本地。
const menuMap={
“/仪表盘”:{路径:/仪表盘,名字:“首页”}
}
const routerList=[
{路径:/仪表盘,名字:“首页”,组件:. .}
)
在页面刷新的时候,从本地获取路由表,添加到路由表中,代码如下,constRouterArr为基础路由表,比如登录,404等
const routerList=storage.get (“routerArr”)
const routerArr=constRouterArr.concat (routerList);
对于按钮的权限
如果(res.data.auth_rule_map) {
让obj={}
种(res.data.auth_rule_map)。forEach (i=比;{//将所有的按钮放到一个obj里主要为接口地址
如果(res.data.auth_rule_map[我]。is_menu===0){//如果是按钮
obj [res.data.auth_rule_map[我].rule]=1
}
})
存储。集(“btnList obj);
存储。集(“menuTree res.data.auth_rule_map);
}
auth_rule_map为接口返回权限地图,把按钮的权限过滤出来存到本地。
将地图添加到每个路由组件的数据里,(这里有一个问题,怎么判断一个组件是否是路由组件),目前想到的是通过组件的名字来判断,把所有的路由组件放到一个数组里做判断。
在组件内部的按钮上加上v,如果。uri__里的uri在uriMap里存在就显示。
也可以通过方法来判断,如下面的__isBtnShow,不仅可以控制按钮的显示隐藏,还可以控制其样式,比如颜色等,更加灵活,推荐使用方法来控制
