一，可以使用自定义指令的方式，根据登录的名称，实现按钮级别权限
首先在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指令根据用户不同显示隐藏按钮了。
原效果展示
实现后效果展示：
