next UI

# Auth 鉴权

# 概述

权限组件是一个抽象组件，通过判断准入的权限及用户的权限，来决定是否展示内容。该组件支持多种权限配置，以及对单独功能点操作的鉴权。

# 代码示例

基本用法
属性 authority 为允许通过的权限，属性 access 为用户的权限，当 access 与 authority 相同时，则为鉴权通过，显示默认的 slot 内容，否则显示名为 noMatch 的 slot。如果权限有多个，请参照下例。
鉴权通过
权限通过时显示
鉴权不通过
权限不通过时显示 
<template>
    <div>
        <Divider>鉴权通过</Divider>
        <Auth authority="admin" access="admin">
            <Alert type="success">权限通过时显示</Alert>
            <Alert type="error" slot="noMatch">权限不通过时显示</Alert>
        </Auth>
        <Divider>鉴权不通过</Divider>
        <Auth authority="admin" access="user">
            <Alert type="success">权限通过时显示</Alert>
            <Alert type="error" slot="noMatch">权限不通过时显示</Alert>
        </Auth>
    </div>
</template>
<script>
    export default {

    }
</script>
Expand Copy
参数为数组
属性 authority 和 access 都支持设置为数组，当用户的某个权限只有在准入权限列表中，就会鉴权通过。两者可以都是数组，也可以某个为数组。
鉴权通过
权限通过时显示
鉴权不通过
权限不通过时显示 
<template>
    <div>
        <Divider>鉴权通过</Divider>
        <Auth :authority="['admin', 'user']" :access="['user']">
            <Alert type="success">权限通过时显示</Alert>
            <Alert type="error" slot="noMatch">权限不通过时显示</Alert>
        </Auth>
        <Divider>鉴权不通过</Divider>
        <Auth :authority="['admin', 'user']" :access="['op']">
            <Alert type="success">权限通过时显示</Alert>
            <Alert type="error" slot="noMatch">权限不通过时显示</Alert>
        </Auth>
    </div>
</template>
<script>
    export default {

    }
</script>
Expand Copy
自定义鉴权方法
当字符串或数组权限列表不能满足业务时，属性 authority 还支持 Function 或 Boolean，此时 access 将无效，鉴权结果取决于 Function 和 Boolean 的值。若是 Function，则必须返回 true 或 false。
鉴权通过
权限通过时显示
鉴权不通过
权限不通过时显示 
<template>
    <div>
        <Divider>鉴权通过</Divider>
        <Auth :authority="authority">
            <Alert type="success">权限通过时显示</Alert>
            <Alert type="error" slot="noMatch">权限不通过时显示</Alert>
        </Auth>
        <Divider>鉴权不通过</Divider>
        <Auth :authority="false">
            <Alert type="success">权限通过时显示</Alert>
            <Alert type="error" slot="noMatch">权限不通过时显示</Alert>
        </Auth>
    </div>
</template>
<script>
    export default {
        methods: {
            authority () {
                return true;
            }
        }
    }
</script>
Expand Copy
功能点鉴权
某些场景下，会对某个特定的功能点操作进行鉴权，通常为按钮 Button 的点击操作，当没有权限时，不允许点击，并给出一个提示。开启属性 prevent 后，则不会返回 noMatch 的 slot，而是阻止组件内的点击，并给一个 $Message 提示，提示内容可通过 message 属性修改，或开启属性 custom-tip，并监听事件 @click 完全自定义点击效果。
prevent 模式，默认效果
prevent 模式，自定义文案
prevent 模式，自定义点击
<template>
    <div>
        <Divider>prevent 模式，默认效果</Divider>
        <Auth authority="admin" access="user" prevent>
            <Button type="primary" size="large" @click="handleSubmit">操作</Button>
        </Auth>
        <Divider>prevent 模式，自定义文案</Divider>
        <Auth authority="admin" access="user" prevent message="权限不足">
            <Button type="primary" size="large" @click="handleSubmit">操作</Button>
        </Auth>
        <Divider>prevent 模式，自定义点击</Divider>
        <Auth authority="admin" access="user" prevent custom-tip @click="handleClick">
            <Button type="primary" size="large" @click="handleSubmit">操作</Button>
        </Auth>
    </div>
</template>
<script>
    export default {
        methods: {
            handleSubmit () {
                // 因为第一个鉴权是不通过的，所以点击按钮也不会触发该方法
                this.$Message.success('点击了操作按钮');
            },
            handleClick () {
                this.$Notice.warning({
                    title: '提示',
                    desc: '您当前权限不足，无法进行操作'
                });
            }
        }
    }
</script>
Expand Copy

# API

# Auth Props

属性 说明 类型 默认值
authority 准入权限，详见示例 String, Array, Function, Boolean true
access 用户权限 String, Array -
prevent 是否开启阻止模式，开启后，不会返回 noMatch 的 slot，而是阻止组件内的点击，反而给一个 $Message 提示，常用于 Button 操作 Boolean false
message 在 prevent 开启时有效，点击提示的内容，当开启 custom-tip 时无效 String 您没有权限进行此操作
custom-tip 在 prevent 开启时有效，通过监听 @click 自定义提示 Boolean false
display 设置包裹组件的 display 类型，包裹组件是一个 div 元素 String -
to 开启后，当鉴权不通过时，直接跳转到指定路由 Object, String -
replace 路由跳转时，开启 replace 将不会向 history 添加新记录 Boolean false
append 同 vue-router append Boolean false

# Auth Events

事件名 说明 返回值
click 当开启 prevent，且鉴权不通过时，点击会触发 event

# Auth Slots

名称 说明
default 自定义标题
noMatch 自定义补充描述

← 文本自动省略 →