Контроль разрешений на уровне кнопок на основе пользовательских инструкций VUE

внешний интерфейс Vue.js

Предисловие: Эти вещи о разрешениях! ! !

Для разрешений на маршрутизацию, пожалуйста, обратитесь к тому, что написал этот великий бог, и это очень исчерпывающе ==>Рука об руку, вы попадете на задний план с vue series 2 (разрешение на вход)

Идеи:

  • Логин: После того, как пользователь заполнит учетную запись и пароль, он проверит правильность с сервером.После того, как проверка будет пройдена, сервер вернет токен.Статус входа пользователя), интерфейс будет тянуть интерфейс user_info на основе токен для получения подробной информации о пользователе (например, разрешения пользователя, имя пользователя и т. д.).
  • Проверка разрешения: получите роль, соответствующую пользователю, с помощью токена, настройте инструкцию и получите btnPermissions(Примечание: meta.btnPermissions — это массив разрешений кнопок, настроенный в таблице маршрутизации.), а затем определить, есть ли роль в массиве btnPermissions, если нет, удалить DOM кнопки.

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

Без лишних слов, давайте перейдем к коду...

Конфигурация маршрутизации:


    path: '/permission',
    component: Layout,
    name: '权限测试',
    meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
    children: [
        {
            path: 'supper',
            component: _import('system/supper'),
            name: '权限测试页',
            meta: { btnPermissions: ['admin','supper'] }  //页面需要的权限
        },
        {
            path: 'normal',
            component: _import('system/normal'),
            name: '权限测试页',
            meta: { btnPermissions: ['admin'] }  //页面需要的权限
        }
    ]

Пользовательская директива:


    import Vue from 'vue'
    
    /**权限指令**/
    const has = Vue.directive('has', {
        bind: function (el, binding, vnode) {
            // 获取页面按钮权限
            let btnPermissionsArr = [];
            if(binding.value){
                // 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。
                btnPermissionsArr = Array.of(binding.value);
            }else{
                // 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较。
                btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
            }
            if (!Vue.prototype.$_has(btnPermissionsArr)) {
                el.parentNode.removeChild(el);
            }
        }
    });
    // 权限检查方法
    Vue.prototype.$_has = function (value) {
        let isExist = false;
        // 获取用户按钮权限
        let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
        if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
            return false;
        }
        if (value.indexOf(btnPermissionsStr) > -1) {
            isExist = true;
        }
        return isExist;
    };
    export {has}

Затем импортируйте файл в файл main.js.


import has from './public/js/btnPermissions.js';

Кнопке на странице нужно только добавить v-has


<el-button @click='editClick' type="primary" v-has>编辑</el-button>

Заключение:

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

В приведенном выше есть недостатки, добро пожаловать, чтобы дать больше советов в области комментариев! ! !

Спасибо великим богам в области комментариев за их дружеские предложения, которые были приняты. Эта статья была обновлена ​​(2019-12-09), еще раз спасибо!

Категории