Промежуточная и фоновая аутентификация Vue — настраиваемые инструкции для получения детальных разрешений

Vue.js

Поскольку бэкенд-интерфейс проекта развернут вeasy-mockВыше, поэтому интерфейс будет время от времени зависать, если ошибка при входе в сеть, то должно быть easy-mock зависает, и через некоторое время все будет нормально (спасибо разработчикам и сопровождающим easy-mock)

Заимствуйте фотографию босса и немедленно удаляйте ее за нарушение

Сказать, что одна строка кода - это немного преувеличение. Спасибо vue за предоставление идеального API, так что мы можем реализовать функции с наименьшим количеством кода. Это также то, что придумал я, поэтому есть некоторые необдуманные проблемы в отсутствие сохранности.Если есть вопросы,пишите в комментарии 🤣

предисловие

Опубликовано на Наггетс на прошлой неделеЕще одна идея фоновой аутентификации во Vue — реализация и оптимизация динамической маршрутизации, некоторые товарищи подняли некоторые вопросы под комментариями

  1. Как сделать единый вход vue

    Я уже писал полный проект стека,vue+koa2+jwt реализует единый вход + добавление, удаление, изменение и проверку списка задач, есть введение проекта, если интересно, можете глянуть 😄

  2. Что делать, если вам нужно много аутентификаций на уровне кнопок

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

Последний случай был обновлен на github, добро пожаловать на опыт~~vue-element-asyncLogin, Ваш старт - моя мотивация!

Реализовать идеи

  • Управляйте кнопкой в ​​соответствии со списком разрешений, возвращаемым серверной частью
  • Должен быть прост в обслуживании и иметь меньше кода для реализации функций.

Реализация v-if

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

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

Образец кода:

src\utils\index.js

import store from '../store'

/**
 * 效验权限
 * @param {String} e 权限标号
 */
export function permit(e) {
    return store.getters.roles.includes(e)
}

src\views\dashboard\index.vue

<el-button v-if="basePermit('edit')" type="warning">修改</el-button>
<el-button v-if="basePermit('view')" type="success">查看</el-button>

import { permit } from '../../utils/index.js'
// ...
methods: {
    basePermit(e) {
        return permit(e)
    }
}

Хоть этого и можно добиться, но очень хлопотно, если нужно много страниц, то код громоздкий, а это не то, что нам нужно.

Реализация пользовательских директив

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

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

  1. Запрашивать список разрешений при обновлении страницы
  2. Сохранить в vuex или браузере
  3. Создание пользовательских директив

src\utils\directive.js

import Vue from 'vue'
import store from '../store'
/**
 * @export 自定义指令
 */
export function directive() {
  Vue.directive('permit'， {
    bind(el， binding) {
        // 一行三目运算符就可
      !store.getters.roles.includes(binding.value) ? el.parentNode.removeChild(el) : {}
    }
  })
}
  1. нужно представитьsrc\main.js 
import { directive } from './utils/directive'
// ....
directive()
// ....

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

очень простой

<el-button v-permit="'add'" type="primary">增加</el-button>
<el-button v-permit="'delete'" type="danger">删除</el-button>
<el-button v-permit="'edit'" type="warning">修改</el-button>
<el-button v-permit="'view'" type="success">查看</el-button>

Все кончено~~~

Демонстрационная ссылка внизу статьи

Скриншот проекта

Ты научился 😄

адрес проектаvue-element-asyncLogin, Если это вам поможет, пожалуйста, не скупитесь на старт~~😄

Категории