vue权限系统
后台管理系统一般都会有权限模块&＃xff0c;用来控制用户能访问哪些页面和哪些数据接口。大多数管理系统的页面都长这样。
下面预览图是我写的一个后台管理系统&＃xff0c;源码请点击链接 vuets-iview-admin 技术栈 - vue&＃43;typescript&＃43;iview
![]()
左边为菜单&＃xff0c;分为两级&＃xff0c;右边为图表显示区域&＃xff0c;有增删改查的按钮。
表的结构
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS &＃61; 0;
-- ----------------------------
-- Table structure for t_auth_rule
-- ----------------------------
DROP TABLE IF EXISTS &＃96;t_auth_rule&＃96;;
CREATE TABLE &＃96;t_auth_rule&＃96; (
&＃96;id_pk&＃96; bigint(20) NOT NULL AUTO_INCREMENT,
&＃96;auth_id&＃96; varchar(128) NOT NULL COMMENT &＃39;权限Id&＃39;,
&＃96;pauth_id&＃96; varchar(128) DEFAULT NULL COMMENT &＃39;父级Id&＃39;,
&＃96;auth_name&＃96; varchar(255) NOT NULL COMMENT &＃39;权限名称&＃39;,
&＃96;auth_icon&＃96; varchar(255) NOT NULL COMMENT &＃39;权限图标&＃39;,
&＃96;auth_type&＃96; smallint(6) NOT NULL COMMENT &＃39;权限类型&＃xff0c;BIT表示其属性\r\n 0x00表示可显示的菜单权限节点;\r\n 0x01表示普通节点&＃39;,
&＃96;auth_condition&＃96; text COMMENT &＃39;条件&＃39;,
&＃96;remark&＃96; varchar(255) DEFAULT NULL COMMENT &＃39;备注&＃39;,
&＃96;is_menu&＃96; smallint(255) DEFAULT &＃39;0&＃39; COMMENT &＃39;是否为菜单&＃xff0c;0表示非&＃xff0c;1表示是&＃39;,
&＃96;weight&＃96; int(11) NOT NULL DEFAULT &＃39;0&＃39; COMMENT &＃39;权重&＃39;,
&＃96;rule&＃96; varchar(256) DEFAULT NULL COMMENT &＃39;规则路径主要对应菜单或方法的路径名称&＃39;,
&＃96;cr_time&＃96; timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT &＃39;创建时间&＃39;,
&＃96;up_time&＃96; timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT &＃39;更新时间&＃39;,
PRIMARY KEY (&＃96;id_pk&＃96;),
UNIQUE KEY &＃96;AK_auth_id&＃96; (&＃96;auth_id&＃96;)
) ENGINE&＃61;InnoDB AUTO_INCREMENT&＃61;264 DEFAULT CHARSET&＃61;utf8 COMMENT&＃61;&＃39;权限规则表&＃xff0c;记录权限相关的信息&＃xff0c;权限以父子关系存在&＃xff0c;菜单是权限的一种。&＃39;;
SET FOREIGN_KEY_CHECKS &＃61; 1;
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS &＃61; 0;
-- ----------------------------
-- Table structure for t_role_auth
-- ----------------------------
DROP TABLE IF EXISTS &＃96;t_role_auth&＃96;;
CREATE TABLE &＃96;t_role_auth&＃96; (
&＃96;id_pk&＃96; bigint(20) NOT NULL AUTO_INCREMENT,
&＃96;role_id_fk&＃96; varchar(32) DEFAULT NULL COMMENT &＃39;角色id&＃39;,
&＃96;auth_id_fk&＃96; varchar(128) DEFAULT NULL COMMENT &＃39;权限id&＃39;,
&＃96;aa&＃96; varchar(255) DEFAULT NULL,
PRIMARY KEY (&＃96;id_pk&＃96;)
) ENGINE&＃61;InnoDB AUTO_INCREMENT&＃61;77 DEFAULT CHARSET&＃61;utf8 COMMENT&＃61;&＃39;角色与权限的关系表&＃39;;
SET FOREIGN_KEY_CHECKS &＃61; 1;
稍微解释一下表结构&＃xff0c;t_auth_rule 表用来存储对应的权限菜单&＃xff0c;一般来说&＃xff0c;菜单分为一级和二级菜单&＃xff0c;rule字段对应前端的路由规则&＃xff1b;而按钮为第三级&＃xff0c;rule对应的是接口url地址。
t_role_auth 表为角色权限关联表&＃xff0c;一个角色拥有哪些权限是通过这张表查出来的。当然还有一个role表&＃xff0c;还有一个账号表&＃xff0c;账号表里有一个role的外键。
这样就是一个账号 --> 角色 --> 权限的关系。
对于菜单的权限&＃xff0c;通过路由表匹配
// 本地写好路由列表(需要进行动态匹配的)
export const routerList: Array &＃61; [
// 首页
{
path: &＃39;/&＃39;,
name: &＃39;_home&＃39;,
redirect: &＃39;/home&＃39;,
component: Layout,
meta: {
hideInMenu: true,
notCache: true
},
children: [
{
path: &＃39;home&＃39;,
name: &＃39;home&＃39;,
meta: {
hideInMenu: true,
title: &＃39;首页&＃39;,
notCache: true,
icon: &＃39;md-home&＃39;
},
component: () &＃61;> import(&＃39;&＃64;/views/overview-operations/data-center/DataCenter.vue&＃39;)
}
]
}
]
// 负责将后台返回的 菜单列表 转成vue-router所需要的 router list
export function toRouterComponent(menuList: Array) {
if (!menuList.length) return []
let routerArr &＃61; [];
for (let j &＃61; 0; j let obj;
let firstIndex &＃61; routerList.findIndex(i &＃61;> i.path &＃61;&＃61;&＃61; menuList[j].url); // 一级菜单
if (firstIndex !&＃61;&＃61; -1) {
let children: Array &＃61; []
obj &＃61; {
path: routerList[firstIndex].path,
component: routerList[firstIndex].component,
redirect: routerList[firstIndex].redirect,
name: routerList[firstIndex].name,
meta: routerList[firstIndex].meta,
children
};
// 如果有子菜单
if (menuList[j].children && menuList[j].children.length) {
for (let k &＃61; 0; k const _children &＃61; routerList[firstIndex].children!
let secondIndex &＃61; _children.findIndex(i &＃61;> {
let fullpath &＃61; &＃39;&＃39;;
if (routerList[firstIndex].path &＃61;&＃61;&＃61; &＃39;/&＃39;) {
fullpath &＃61; &＃96;${routerList[firstIndex].path}${i.path}&＃96;;
} else {
fullpath &＃61; &＃96;${routerList[firstIndex].path}/${i.path}&＃96;;
}
return fullpath &＃61;&＃61;&＃61; menuList[j].children[k].url;
});
if (secondIndex !&＃61;&＃61; -1) {
obj.children.push(_children[secondIndex]);
}
}
}
}
if (obj) {
routerArr.push(obj);
}
}
return routerArr;
}
// 根据菜单权限&＃xff0c;获取路由数组
// 本地只保存后台返回的菜单&＃xff0c;在页面刷新的时候从本地拿到菜单重新调用toRouterComponent生成 路由数组
export function getRouterList() {
if (!storage.get(&＃39;username&＃39;)) {
storage.set(&＃39;menuTree&＃39;, &＃39;&＃39;); // 清空菜单权限数据
}
let menuList &＃61; storage.get(&＃39;menuTree&＃39;) ? storage.get(&＃39;menuTree&＃39;) : [];
const routerArr &＃61; toRouterComponent(menuList);
return routerArr;
}
menuList&＃xff0c;菜单数组(或对象), 由后台返回&＃xff1b; routerList为前端定义的路由表&＃xff1b;遍历routerList&＃xff0c;如果routerList的path在menuMap里能找到的话&＃xff0c;就表示该路由存在。最后生成一个过滤后的路由表&＃xff0c;用vue提供的addRoutes方法动态添加到路由中&＃xff0c;并把过滤后的路由表存到本地。
在页面刷新的时候&＃xff0c;从本地获取路由表&＃xff0c;添加到路由表中&＃xff0c;代码如下&＃xff0c;constRouterArr为基础路由表&＃xff0c;比如登录&＃xff0c;404等
注意这一步有个问题&＃xff0c;由于我写的storage库用了JSON.stringify&＃xff0c;把路由表中的component(实际为一个函数)丢失了&＃xff0c;所以在从本地获取路由的时候&＃xff0c;还要重新生成一个新的路由表&＃xff0c;重新把component加上去&＃xff0c;即把上面的addrouters重新执行一遍
对于按钮的权限
if (res.data.auth_rule_map) {
let obj &＃61; {}
Object.keys(res.data.auth_rule_map).forEach(i &＃61;> {
// 将所有的按钮放到一个obj里 key 为接口地址
if (res.data.auth_rule_map[i].is_menu &＃61;&＃61;&＃61; 0) { // 如果是按钮
obj[res.data.auth_rule_map[i].rule] &＃61; 1
}
})
storage.set("btnList", obj);
storage.set("menuTree", res.data.auth_rule_map);
}
auth_rule_map为接口返回权限map&＃xff0c;把按钮的权限过滤出来存到本地。
将map添加到每个路由组件的data里&＃xff0c;(这里有一个问题&＃xff0c;怎么判断一个组件是否是路由组件)&＃xff0c;目前想到的是通过组件name来判断&＃xff0c;把所有的路由组件放到一个数组里做判断。
在组件内部的按钮上加上v-if&＃xff0c;如果this.uri__里的uri在uriMap里存在就显示。
也可以通过方法来判断&＃xff0c;如下面的__isBtnShow&＃xff0c;不仅可以控制按钮的显示隐藏&＃xff0c;还可以控制其样式&＃xff0c;比如颜色等&＃xff0c;更加灵活&＃xff0c;推荐使用方法来控制
uri &＃61; {
ADD_MEMBER: &＃39;/api/add_member&＃39;
}
export default function install (Vue) {
const uriMap &＃61; storage.get(&＃39;btnList&＃39;)
//uriMap[&＃39;/admin/api/auth_rule/update_auth_rule.action&＃39;] &＃61; 1
Vue.mixin({
created() {
const arr &＃61; [&＃39;MemberManage&＃39;, &＃39;PayManage&＃39;, &＃39;...&＃39;]
if (arr.indexOf(this.$options.name) !&＃61;&＃61; -1) {
this.dataUri__ &＃61; uriMap
this.uri__ &＃61; uri
}
},
data() {
return {
dataUri__: {}
}
},
methods: {
__isBtnShow(uri) {
return uriMap[uri] ? &＃39;display: inline-block&＃39; : &＃39;display: none&＃39;
},
}
})
}
添加会员
// 通过方法来控制&＃xff0c;更加灵活
添加会员
登出的问题
**登出后要清空缓存&＃xff0c;routerArr&＃xff0c;btnList 等。
由于之前登录&＃xff0c;调用addRouter把权限上个账号的路由表加进去了&＃xff0c;所以登出后要location.reload()一次&＃xff0c;重新实例化路由表&＃xff0c;去掉动态添加的路由&＃xff0c;只保留基础路由。
location.reload()体验不是太好&＃xff0c;但是vue-router没有提供动态删除路由的api&＃xff0c;比如 deleteRouter。**
同时登两个账号&＃xff0c;导致刷新页面的时候&＃xff0c;前者页面的本地缓存被覆盖&＃xff0c;权限菜单等数据发生变化&＃xff0c;路由表也发生变化
最简单的方法是存到localStorage里&＃xff0c;只有登出才会清空缓存&＃xff0c;只能登一个账号。
关于菜单和按钮的多语言放在前台还是后台
经过思考还是觉得放在前台好&＃xff0c;有两点原因
放在前台方便前台操作&＃xff0c;切换语言时不需要重新从后台获取菜单和按钮的名称
如果放在后台&＃xff0c;新增语言的时候&＃xff0c;后台还得加字段&＃xff0c; 放在前台的话只需要更新一下语言包就行了
关于menutree 是否存到本地
之前一直是存在localstorage里&＃xff0c;但是仔细一想还是有安全问题&＃xff0c;用户可以通过api改变本地的menutree&＃xff0c;刷新页面后还是会得到想要的权限&＃xff0c;所以menutree 不能存到本地&＃xff0c;只读到内存中&＃xff0c;页面刷新后&＃xff0c;再重新获取一次menutree&＃xff0c;代价就是会牺牲一点用户体验。
关于左侧菜单栏重复push的问题
window.addEventListener(&＃39;storage&＃39;, () &＃61;> {
// 当同时打开两个网页 其中一个网页退出登录的时候 通知另一个网页刷新 把之前的路由清掉
// 这样就不会重复push路由进去了
if (getLsCache(&＃39;username&＃39;) &＃61;&＃61;&＃61; &＃39;&＃39;) {
window.location.reload();
setTimeout(() &＃61;> {
this.$router.push(&＃39;/login&＃39;);
}, 200);
}
});
this.setLocal(this.$i18n.locale);
京公网安备 11010802041100号