目标:vue按钮权限的控制解决方案
准备知识点:
(一)Vue.directive指令(自定义指令)
webpack中案例
main.js中写入如下代码:
1. 怎么配置
自定义指令的生命周期
Vue.directive('hello', {
// 当被绑定的元素插入到 DOM 中时……被调用
inserted: function(el,binding,vnode) {
el.style["color"]= binding.value;
},
update: function() {//所在组件的 VNode 更新时调用
},
componentUpdated: function() {//子组件和父组件都更新时调用
},
unbind: function() {//只调用一次,指令与元素解绑时调用
},
})
---------------写在vue实例之前。
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
2. 怎么调用:
不管在哪个组件中,
只要标签中包含 v-hello 这个自定义属性。就等于执行自定义函数。
<span v-hello="color">{{message}}</span>
data() {
return {
message: 10,
color: "green",
};
},
3 默认写法
一般使用插入功能,可以简写如下
第一种写法:
Vue.directive("hello",function(el,binding,vnode){
console.log(el,binding,vnode )
el.style["color"]= binding.value;
})
第二种写法:
Vue.directive('hello', {
// 当被绑定的元素插入到 DOM 中时……被调用
inserted: function(el,binding,vnode) {
console.log(el)
el.style["color"]= binding.value;
}
})
总结:1.当directive中传入一个回调函数时,默认是inserted dom插入时执行一次。
注意:2. 上述代码写到实例之前。
4.可以使用参数说明
这里要说明的就是指令写的是v-hello,但是我们用directive的时候前面不用加v-了,直接输入指令即可
可以看到数字也变成绿色了,说明自定义指令也起作用了。
el : 指令所绑定的元素,可以用来直接操作DOM
binding: 一个对象,包含指令的很多信息
vnode: VUE编译生成的虚拟节点
<span v-hello="color">{{message}}</span>
v-hello="color" 可以传字符串 对象 和数组
v-hello="[color ,20]"
参考:
(二) sessionStorage
官方:
sessionStorage
属性允许你访问一个,对应当前源的 session Storage
对象。它与 localStorage
相似,不同之处在于 localStorage
里面存储的数据没有过期时间设置,而存储在 sessionStorage
里面的数据在页面会话结束时会被清除。
查看方式: chrome 浏览器的 Application 下的 Storage -> sessionStorage
简单来说: 设置没有过期时间, 刷新页面不掉数据。 除非关掉页面或者手动去localStorage清除,和使用官方方法清除。
语法
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
参考:
(三 ) 项目使用:
均在main.js中。
前提: 路由中的name 先设置好。用于区分进入的页面是那个一个。
第一步:设置路由守卫 进入页面调用方法
router.afterEach(route => {
// 除了访问跳转中间件 toJump, 访问页面时会去获取该页面的按钮权限
if (route.name != "toJump") {
getButtonPermission(route.name);
}
})
调用的方法:作用从后台获取权限数据,存入到本地sessionStorage。
/**
* @description 获取按钮权限
* @param {String} code 页面编码
* */
function getButtonPermission(pageCode) {
Vue.prototype.$axios.defaults.withCredentials = true;
Vue.prototype.$axios
.post(Vue.prototype.$auth + "/getMenuByProCode", { proCode: "jtyj" })
.then((res) => {
let code = res.data.code;
if (code === 200) {
let data = res.data.resultData;
console.log(data)
data.forEach(item => {
if (item.id == pageCode) {
sessionStorage.setItem("buttonPermission", JSON.stringify(item.buttonList));
}
})
}
})
.catch((error) => {
console.log(error);
});
}
第二步
设置自定义指令 作用是:当标签中包含指定 btn-has时, 获取传入的参数,进行判断,是否显示或移除当前dom.
/**
* 按钮权限判断指令
*/
Vue.directive('btn-has', {
// 当被绑定的元素插入到 DOM 中时
inserted: function (el, binding) {
let params = binding.value;
if (params) {
let flag = Vue.prototype.btnPermission(params.split(',')[0], params.split(',')[1]);
if (!flag) {
el.remove();
}
}
}
});
第三步:
组件中使用自定义指令 注意前缀:v-
v-btn-has="'common,add'"
<el-button
type="primary"
@click="dialogVisible = true;dialogTitle = '新增';dialogForm.orgTypeId='0'"
v-btn-has="'common,add'"
>新增</el-button>
参考: