木灵鱼儿
阅读:996
更加精细化的权限设计(权限组件、权限指令)
路由的鉴权只能处理大的方面,而更精细度的权限控制,就做不到了,如果我页面有一些按钮是需要有权限才能显示,那么,单路由鉴权根本无法做到。
所以我们还需要更加精细化的权限控制。
这里有两种权限的控制方式:
- 权限组件
- 权限指令
权限组件
权限组件可以理解为一个插槽组件,这个组件自身做一个权限判断,如果有权限我们就允许这个插槽内容展示。
但是这么一个小小的功能其实也没必要做做一个传统组件,使用函数式组件他的性能会更高,因为用的地方很多,组件本身也没太多东西。
既然是鉴权,我们自然需要一个用于判断是否有权限的函数,我们依旧可以使用上一章的check函数
auth.js
//后端返回权限
function getAuthority() {
return "admin";
}
//判断是否有权限
function check(metaAuthority) {
const current = getAuthority();
return metaAuthority.includes(item);
}
export default {check};
函数式组件
<script>
import { check } from "./utils/auth";
export default {
functional: true,
props: {
//权限数组
authority: {
type: Array,
required: true,
},
},
render(h, context) {
const { props, scopedSlots } = context;
return check(props.authority) ? scopedSlots.default() : null;
},
};
</script>
functional声明这是一个函数式组件,并引入check函数。
props接受一个authority数组,这个数组和路由的meta.authority一样,表示有权限访问的等级数组。
这里我们就不使用template形式的函数式组件,因为如果使用template的话,他必须要有一个元素作为根元素包裹,这无形中会让插槽中接受的html结构发生的变化,所以我们该用render函数。
render接收两个参数,一个是h,也就是createElement方法,第二个是上下文对象。
我们通过结构这个上下文对象,拿到props, scopedSlots
,scopedSlots是插槽对象。
然后判断,如果check返回了true,说明我们是有权限访问这个默认插槽接收的内容的,所以返回scopedSlots.default()
,反之则是null。
使用
既然组件做好了,我们就需要使用,而这个组件一般来说整个项目会有很多地方用到,所以最好是注册为全局组件使用。
我们在main.js文件中引入并注册
import Authorized form "./components/Authorized";
Vue.component("Authorized",Authorized);
在其他组件中直接使用
<template>
<div>
<authorized :authority="['admin']">
<span>我是admin才能看的内容</span>
</authorized>
</div>
</template>
这样就行了。
组件式鉴权,有利有弊,好处就是,他是一个动态响应式的,当用户权限发生变化时,不用刷新页面也能响应。
坏处就是书写有点麻烦,因为你需要写一个组件来使用。
指令鉴权
指令鉴权就相对于组件式的,他就更简单,不用书写那么多代码
在项目里面创建directives
文件夹,用于统一存放自定义指令。
在里面创建一个auth.js
文件。
内容如下:
import { check } from "../utils/auth";
function install(Vue, options = {}) {
Vue.directive(options.name || "auth", {
inserted(el, binding) {
if (!check(binding.value)) {
el.parentNode && el.parentNode.removeChild(el);
}
}
});
}
export default { install };
我们也是先引入check鉴权函数,然后导出一个install方法,这个方法用于Vue对象use激活。
接收两个参数,一个是默认传过来的Vue对象,一个是options,options用于自定义的一些设置,可写可不写。
这里写,用于判断是否使用自定义指令名称。
Vue.directive
注册一个指令,第一个参数是指令的名称,我们判断有无自定义指令options.name
,无就使用默认的auth
第二个参数是一个对象,里面有一些生命周期,我们在inserted生命周期下。
inserted:表示元素被插入到dom时触发
接收两个参数,一个是这个指令所绑定的元素el,一个是binding
对象,这对象里面包含指令的name属性,指令绑定的值value属性,还有一些其他的,具体就自己去看vue文档了。
我们这里只需要value值就行了,value就是权限的数组,我们if判断,如果没有权限,我们将这个绑定的el元素从dom中删除。
el是一个原生dom对象,所以删除的时候,要从他的父元素parentNode来使用removeChild删除el。
这样一个自定义指令就写好了,我们对他进行全局注册。
全局注册
import Auth from "./directives/auth";
Vue.use(Auth);
注册完毕后我们这样使用:
<template>
<div>
<span v-auth="['admin']"> 我是admin才能看的内容</span>
</div>
</template>
这样就行了,相对于组件式的,更加方便。
但是指令时的鉴权也是有弊端的,就是他无法响应变化,因为他直接把元素删除了,所以没法回溯回来。如果用户权限发生了变化,只能刷新页面重新判断了。
当然,用户的权限一般来说不会变来变去,所以指令方式也没那么不堪一用。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

.native修饰符 做了什么
估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。然后,我就一直很好奇,他是怎么做到准确绑定的?然而事实上,他就是一次事件的绑定而已。<base-input v-on:focus="onFocus"></base-input>base-input<template> <div class="input-item"> <input type="text"> </div> </t...
实现一个点击自动滚动到指定元素,并让input元素聚焦
效果图思路分析tab切换在vue中,tab的切换只需要改动tab组件的active属性即可,所以,我们只需要对点击的元素,点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计,比如html元素可以使用data属性。聚焦聚焦就很简单了,input元素有focus方法,运行就会聚焦。滑动定位利用scrollIntoView方法,可以达到定位的效果,配置属性,就会有动画。element.scrollIntoView({behavior:"smooth"})MDN:Element.scrollIntoView()点击这个元素,从data属性上获取要滚动的元...
