Внешний дизайн и реализация разрешений — уровень кнопок

Шаблоны проектирования

Меня всегда интересовал дизайн разрешений. Когда я раньше писал внутренний код, я занимался дизайном разрешений, что было очень интересно. Однако я узнал о дизайне разрешений на уровне кнопок интерфейса, но не пока не реализовал.Недавно проект планирует подразделить разрешения.Давайте сначала изучим разрешения внешнего интерфейса.

Отправной точкой проектирования разрешений является предоставление пользователям с разными разрешениями возможности видеть разный контент и достижимые операции.

С точки зрения конкретного дизайна его можно разделить на разрешения на уровне маршрутизации и разрешения на уровне кнопок.С точки зрения сложности реализации они довольно просты.В этом блоге в основном рассказывается о контроле разрешений на уровне кнопок.

Что должно делать разрешение на уровне кнопки?

Чтобы осуществлять контроль разрешений, вы должны сначала знать, какую цель вы хотите достичь.

Контроль разрешений на уровне кнопок относительно прост.В соответствии с разными идентификаторами кнопки, которые можно увидеть, и функции, которыми можно управлять, различаются.

Прежде всего, необходимо отличить и проверить личность, а также извлечь общедоступный метод в соответствии с категорией разрешений пользователя, выданной сервером.

// ../utils/auth.js 文件位置


//获取当前客户权限
export function getCurrentAuthority(){
    ...
    return ["admin"]
}

//校验权限
export function check(authority = []){
    let current = getCurrentAuthority();
    return current.some(item => authority.includes(item))
}

//登录校验
export function isLogin(){
    const current = getCurrentAuthority();
    return current && current[0] !== "guest";    
}

Два метода реализации

После извлечения публичного метода для извлечения и проверки личности его можно использовать в разных компонентах, самый грубый метод — использовать его напрямуюv-ifделать сумасшедшие суждения.

Но этот метод не элегантен и будет использовать оригинальныйv-ifСуществует два основных способа использования инкапсуляции суждения о разрешении: один — компонент, а другой — инструкция.

1. Компонентный метод

теперь, когдаv-ifне очень элегантно, так что можно поставитьv-ifЧто касается инкапсуляции функций, то ответ, конечно, выполним.Нам нужно только вложить слой компонентов вне контента, который требует контроля разрешений, и использовать внешний компонент, чтобы судить, отображается ли внутренний компонент, и тогда мы можем добиться того, что нам нужно.v-ifСпособность.

Что касается этого компонента разрешения, мы можем подумать об этом.

Прежде всего, компоненту разрешений не нужно иметь конкретный рендеринг dom, его функция состоит только в том, чтобы судить, отображать ли его вложенные конкретные бизнес-компоненты в соответствии с условиями. В этом случае может не бытьtemplateСодержимое шаблона нуждается только в определенной логике, так что это может быть просто чисто функциональный компонент, а о разрешениях, разрешенных в реквизитах, можно судить по ссылке на инкапсулированный метод проверки разрешений.

Реализация компонента:

<script>
import { check } from "../utils/auth.js";

export default {
    name: 'Authorized',
    functional:true,
    props: {
        authority:{
            type:Array,
            required:true
        }
    },  
    render(h, context) {
        const { props, scopedSlots } = context;
        return check(props.authority) ? scopedSlots.default() : null
    },
}
</script>

Идеи:

Передайте разрешенные разрешения через реквизиты.В функции рендеринга выньте содержимое реквизитов и слотов слотов через контекст и используйте метод проверки, чтобы проверить, проходят ли разрешения, переданные реквизитами, и визуализируйте содержимое слота в соответствии с Результат для реализации контроля разрешений.

Компоненты используют:

<template>
    <Authorized :authority="['admin']" >
        <other-components></other-components>
    </Authorized>
</template>

Примечание. Авторизованные компоненты будут использоваться в нескольких местах и ​​могут быть зарегистрированы по всему миру. Конкретный код не показан.

2. Способ обучения

Использование компонентов для управления разрешениями может в основном удовлетворить наши потребности в управлении разрешениями на уровне кнопок.Нам нужно только добавить компоненты вне кнопок, которым требуются разрешения на управление.

Однако каждый раз вкладывать компоненты снаружи довольно обременительно.Мы можем сослаться на следующиеv-ifВыполнение пользовательского командного управления.

//./directives/auth.js
import { check } from '../utils/auth.js';

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 }

Идеи:

Получите параметры, переданные в пользовательской привязке команды, и проверьте их с помощью функции проверки.Если проверка не удалась, получите родительский узел узла, на котором находится текущая команда, чтобы удалить текущий узел и реализовать контроль разрешений.

Регистрация инструкции:

// main.js
import auth from './directives/auth.js'

Vue.use(auth)

Инструкции использовать:

<template>
	<other-components v-auth="['admin']"></other-components>
</template>

Преимущества и недостатки

Используйте компонентный метод для достижения контроля разрешений, после изменения разрешения управляемая часть будет отображаться более гибко, и ее использование будет немного громоздким;

Контроль разрешений, реализованный методом инструкции, относительно прост в использовании, но он реализуется путем удаления узла dom, поэтому он контролируется только в первый раз.

После того, как разрешение будет предоставлено, оно не будет изменено по желанию, вы можете выбрать два разных метода в соответствии со сценарием использования.

Релевантная информация

1. Функциональные компоненты Vue

2. Пользовательские инструкции

Категории