Vue + vuex + директивы для реализации идеи кнопки разрешения

Vue.js Vuex

Столкнулся с бизнес-сценарием:

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

Для такого рода задач очевидно, что каждую кнопку нельзя судить, поэтому я подумал и доделал соответствующую реализацию, объединив кастомные инструкции и vuex.
реализация основного кода

const directive = Vue.directive('permission-click', {
  bind: (el, binding, vnode) => {
    el.addEventListener('click', (e) => {
      if (!store.getters.isLogin) {
        store.dispatch('showLogin')
      } else {
        typeof binding.value === 'function' && binding.value()
      }
    })
  }
})

Здесь инкапсулируется кастомная инструкция, добавляется событие клика и вызывается входящая функция для тех, кто уже авторизовался, в противном случае логин контролируется через vuex (логин здесь достигается через всплывающее окно)
Кроме того, очень легко использовать пользовательские компоненты.

<div class="" v-permission-click="doSomething">
  ...
</div>

Действие showLogin в vuex — это не что иное, как операция отображения и скрытия флага входа в систему.
Вот простое управление разрешениями на вход.Начиная с разрешения на вход, можно добавить больше контроля разрешений, например, судить по роли, а затем разрешения можно контролировать глобально, и реализация чрезвычайно упрощена.

Github: github.com/lyh2668
Authby: lyh2668

Категории