一,可以使用自定义指令的方式,根据登录的名称,实现按钮级别权限
首先在src目录下新建directive目录,在目录下再新建两个js文件
index.js 文件里代码如下:
import permission from './permission'
// 全局注册自定义指令
const install = function(Vue) {
Vue.directive('permission', permission)
}
if (window.Vue) {
window['permission'] = permission
Vue.use(install); // eslint-disable-line
}
permission.install = install
export default permission
permission.js 文件里代码如下:
export default{
inserted(el, binding, vnode) {
/*el: 指令所绑定的元素,可以用来直接操作DOM。
binding: 一个对象,包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。*/
const { value } = binding
// 自定义指令的执行函数,,取到登录缓存的按钮权限数组,赋值给全局对象userMsg
global.ButtonPermissions = JSON.parse(sessionStorage.getItem('ButtonPermissions'))
if (global.ButtonPermissions && global.ButtonPermissions.indexOf(value) < 0) {
el.style.display = 'none'
}
}
}
Vue.directive自定义指令:该指令可以写一个自定义的事件*
自定义指令中传递的三个参数
el: 指令所绑定的元素,可以用来直接操作DOM。
binding: 一个对象,包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
自定义指令的生命周期
自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind
bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
1 inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
2 update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
3 componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
4 unbind:只调用一次,指令与元素解绑时调用。
最后在入口文件src\main.js 里面引入自定义指令。
import Permission from './directive/permission'
Vue.use(Permission)
在登录时根据登录名称去获取改用户他拥有哪些按钮权限
methods: {
submitForm() {
this.$refs.login.validate(valid => {
if (valid) {
//this.param 为用户名称和密码
login(this.param).then(response => {
if (response.data.code != 200){
this.$message.error(response.data.msg);
}else{
this.$message.success(response.data.msg);
localStorage.setItem('token', response.data.data);
localStorage.setItem('username', this.param.username);
//根据登录名称去获取改用户他拥有哪些按钮权限
getPermissions(this.param).then(response=>{
let arr=[];
response.data.data.forEach(aa=>{
//value为对象中的按钮权限字段
arr.push(aa.value);
})
global.ButtonPermissions =arr;
//将获取的按钮权限数组放入sessionStorage缓存中
sessionStorage.setItem("ButtonPermissions",JSON.stringify(global.ButtonPermissions));
})
//跳转首页
this.$router.push('/dashboard');
}
})
} else {
this.$message.error('请输入账号和密码');
console.log('error submit!!');
return false;
}
});
},
效果1:global.ButtonPermissionss数组中
效果2:sessionStorage缓存中
login.js中发送请求:
export const getPermissions = query => {
return request({
url: 'http://localhost:8080/permission/getPermissions',
method: 'post',
params: query
});
};
后台Controller接收:
//获取权限值做按钮级别
@PostMapping("getPermissions")
public ResultObj getPermissions (String username){
//获取改名称下有哪些按钮权限
List<Permission> permissionList = permissionService.getPermissions(username);
return ResultObj.success(permissionList);
}
在PermissionMapper.xml文件中写两表查询:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.fh.permission.mapper.PermissionMapper">
<select id="getPermissions" parameterType="java.lang.String" resultType="com.fh.permission.model.Permission">
select p.value from ums_admin a JOIN ums_permission p ON a.id=p.pid where a.username=#{username}
</select>
</mapper>
在具体页面文件里就可以用v-permission指令根据用户不同显示隐藏按钮了。
原效果展示
实现后效果展示: