未提交代码的组件权限控制设计:
权限系统-1.资源配置
目前权限系统的权限控制粒度能控制到按钮级别,按钮和接口权限同步,同时保证前端实现权限控制的同时,保证后端服务的安全(接口权限)
一:菜单入口
权限配置->资源配置
二:权限配置
1.通过菜单入口进入权限资源配置页面
2.添加对应的资源权限
a.组件名:该值是按钮所属页面组件的名称()
b.组件id:该值是开发自己赋予的值(该值要确保在当前页面是唯一的)
c.接口:该按钮功能下对应的接口权限(按钮可能存在一对多的情况,目前支持单一接口的权限)
d.接口类型:略
e.角色:按钮和接口对应的角色
f.是否生效:略
三:前端组件使用
目前前端提供了两个权限组件用于权限控制(auth.js、has.js)
1.指令 v-auth
使用该指令后,就可以通过页面配置权限的方式动态的给使用该指令的按钮分配权限
对于需要权限控制的按钮
例如资源配置里的删除按钮
<el-button v-auth="{id:'deleteResource',component:'ResourceConfig'}" icon="el-icon-delete" @user1="deleteResourceConfig(scope.row)" type="text"
class="oper-button"
style="color:#EE6F6F"></el-button>
v-auth指令中两个必须参数;id该页面中该按钮的唯一标识;component为当前组件的name;
注意:在确认使用 v-has 的时候必须在该组件测 created 方法中加入 this.$auth();
如图:
所以前端使用 v-auth 指令分两三步:
- 1.在需要的按钮上加上 v-auth(并添加唯一的标识 id,同时加上当前组件 name)
- 2.在当前组件的 created 方法调用 this.$auth()
- 3.请到配置页面配置相应的按钮权限
2.v-has 指令
v-has指令属于前端控制指令、仅对前端的按钮做权限控制,适合资源配置页面,虽然资源配置页面也使用v-auth指令,但是对于资源配置页面的按钮权限来说,使用v-has更加合适
<el-button v-has="['admin']" style="float: right; padding: 3px 0" type="text" @user2="addResource">添加</el-button>
v-has 指令的参数为数组形式,可以加入多个角色,在这里个人不推荐使用 id 作为参数,而是采用 code
前端指令代码
1.auth.js
function install(Vue, options = {}) {
Vue.directive(options.name || "auth", {
inserted(el, binding) {
if (!check(binding.value)) {
el.parentNode && el.parentNode.removeChild(el);
}
}
});
}
function getCurrentAuthority() {
return JSON.parse(localStorage.getItem("roleIds"));
}
function check(authInfo) {
const currentAuthority = getCurrentAuthority();
alert(this.$options.name);
let auth = localStorage.getItem(authInfo.component);
let authJson = JSON.parse(auth);
for (let authData of authJson) {
if (authData.authId == authInfo.id) {
return currentAuthority.some(item => authData.roleIds.includes(item));
}
}
return false;
}
export default {install};
2.has.js
function install(Vue, options = {}) {
Vue.directive(options.name || "has", {
inserted(el, binding) {
if (!check(binding.value)) {
el.parentNode && el.parentNode.removeChild(el);
}
}
});
}
function getCurrentAuthority() {
return JSON.parse(localStorage.getItem("roleCodes"));
}
function check(roles) {
return getCurrentAuthority().some(item => roles.includes(item));;
}
export default {install};
四:后端接口控制
对于在资源配置页面配置过的接口需要在后端接口加上相应的权限标识,以让配置生效
例如在上面配置的删除资源配置的权限接口可以加上@ApiPermission注解以让该接口的权限生效
@Target(ElementType.METHOD)
@Retention(RetentionPolicy.RUNTIME)
public @interface ApiPermission {
Role[] roles() default ALL;
boolean dynamic() default true;
RoleGroup[] groups() default RoleGroup.ALL;
enum RoleGroup {
ALL
}
}
目前该注解有三个参数:roles、dynamic、groups
groups 可以忽略
roles和dynamic是成对出现的,如果我们不想动态配置接口的权限,可以将dynamic设置为false,然后设置roles,否则单独设置roles并不会生效,因为默认情况dynamic为true会从数据库读取相关角色信息