Способ для интерфейсных приложений Vue реализовать контроль разрешений RBAC.

Перед выходом утром я почувствовал, что закончил, поэтому продолжилсистема разрешений jiiiiin, но обнаружил, что не хватает одного, то есть во время первого обновления, дляv-accessРежим по умолчанию команды проверяет, есть ли у вошедшего в систему пользователя права доступа, проверяя список интерфейсов, требуемых соответствующим ресурсом, но сравнение в это время является URL-адресом интерфейса, а структура данных выглядит следующим образом:

authorizeInterfaces:

["admin/dels/*", "admin/search/*/*/*", "admin/*/*/*", "role/list/*", "admin/*"]

Но когда я продолжил писать, то обнаружил, что меня не устраивает Интерфейс в моем бэкграунде типа RESTful, так что его надо верифицировать.url+method, текущая структура данных становится:

authorizeInterfaces:

[{url: "admin/dels/*", method: "DELETE"}, ....]

Поэтому он был изменен.Подробности см. в следующем коммите:

Измените модуль проверки внешнего интерфейса rbac для поддержки проверки интерфейса типа RESTful.

Есть два шага для использования: 1. ДобавленisRESTfulInterfacesКонфигурация:

/**
     * [*] 声明`authorizeInterfaces`集合存储的是RESTful类型的接口还是常规接口
     * 1. 如果是（true），则`authorizeInterfaces`集合需要存储的结构就是:
     * [{url: 'admin/dels/*', method: 'DELETE'}]
     * 即进行接口匹配的时候会校验类型
     * 2. 如果不是（false），则`authorizeInterfaces`集合需要存储的结构就是，即不区分接口类型:
     * ['admin/dels/*']
     */
    isRESTfulInterfaces = true

2. После того, как логин успешно установлен$vp.rabcUpdateAuthorizeInterfacesКогда список разрешенных интерфейсов, вам необходимо построить структуру данных.

3. Для интерфейсов типа RESTful:v-access="[{url: 'admin/search/*', method: 'POST'}]"

теперь дляv-accessЗначение инструкции можно использовать в следующих ситуациях:

• еслиisRESTfulInterfacesУстановить какtrue,Обратите внимание, что это настройка по умолчанию, используйте следующий формат:

v-access="[{url: 'admin/search/*', method: 'POST'}]"
// 或者如果只有一个接口声明
v-access="{url: 'admin/search/*/*/*', method: 'POST'}"

• еслиisRESTfulInterfacesУстановить какfalse, используйте следующий формат:

v-access="['admin', 'admin/*']"

• Если вы хотите использовать псевдоним для идентификации ресурса:

v-access:alias="['LOGIN', 'WELCOME']"
v-access:alias="'LOGIN'"

• Кроме того, выше описано, как объявить разрешения, необходимые для компонента, и если вошедший в систему пользователь не имеет этого разрешения, компонент будет заблокирован.隐藏, но вы также можете использовать следующую конфигурацию, чтобы сделать компонент полупрозрачным и недоступным для кликов:

v-access:alias.disable="['LOGIN', 'WELCOME']"
v-access.disable="['admin', 'admin/*']"

просто добавь одинdisableТолько;

:)

Спасибо за поддержку!

обновить раскол

---

Управление разрешениями можно просто разделить на:

• Управление полномочиями по аутентификации личности
• Управление разрешениями RBAC
• ...

Что касается внешнего интерфейса, моя команда и я искали много мест, но ни одно из них не является очень зрелым или осуществимым.Управление доступом на основе ролей RBACСоответствующая схема контроля разрешений на интерфейсе может быть связана с тем, что наш метод извлечения неверен, или все заняты другими делами и у них нет времени разбираться и публиковать свои собственные методы.Оригинальный планЯ практиковал это сам, и я поделюсь этим с вами ниже.Если что-то не так или не так, пожалуйста, поправьте меня.

Если вы нажмете здесь, вы должны знать, что такое RBAC и почему его нужно использовать, поэтому я не буду подробно объяснять это здесь.Управление доступом на основе ролей RBAC, как правило, используется только в приложениях для управления управлением, поэтому этот модуль не используется в качестве модуля по умолчанию.

Вот некоторыеvue-viewplus Библиотека инструментов, упрощающая разработку приложений Vue.серединаrabc.js Пользовательский модуль управления разрешениями RBAC.

Этот модуль предназначен для предоставления справки по управлению разрешениями rbac для интерфейсных приложений.

его суммамодуль управления авторизацией аутентификации login-state-check.jsРазница состоит в том, что этот модуль предоставляет следующие два метода контроля доступа:

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

Модуль управления авторизацией login-state-check.js обеспечиваетзакрытые страницыПроверка проверки подлинности личности, которая поддерживает проверку подлинности личности пользователя, то есть состояние входа в систему, этот вид управления разрешениями больше подходит для большинства приложений, то есть для предоставленияиспользование пользователемклиентское приложение.

И текущий модуль также зависит отСтатус входа, поэтому их можно повторно использовать вместе;

фактический случай:

имя	канал	Введение
система разрешений jiiiiin	Сторона ПК	Базовый проект внутреннего управления с разделенными интерфейсом и сервером, выполненный на основе текущего плагина.Внешний контроль разрешений RBAC

Эффект следующий:

Инструкции:

1. ЭтоНа основе vue-viewplus реализован кастомный модуль, нестандартный модуль, требующий ручной настройки:

Входной файл main.js:

import router from './router'
import ViewPlus from 'vue-viewplus'
import rbacModule from '@/plugin/vue-viewplus/rbac.js'
import viewPlusOptions from '@/plugin/vue-viewplus'

Vue.use(ViewPlus, viewPlusOptions)

ViewPlus.mixin(Vue, rbacModule, {
    debug: true,
    errorHandler(err) {
        console.error(err)
    },
    moduleName: '自定义RBAC',
    router,
    publicPaths: ['/login'],
    onLoginStateCheckFail(to, from, next) {
        this.dialog(`您无权访问【${to.path}】页面`)
            .then(() => {
            // 防止用户被踢出之后，被权限拦截导致访问不了任何页面，故这里进行登录状态监测
            if (this.isLogin()) {
                next(false);
            } else {
                next('/login');
            }
        })
    }
})

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

• [*] Набор путей маршрутизации, к которым авторизованный пользователь имеет права доступа

  После завершения настройкидоступность страницыУправление просто работает

• [*] Коллекция фоновых интерфейсов, к которым у вошедшего в систему пользователя есть права доступа

• [Необязательно] Набор псевдонимов ресурсов, к которым у вошедшего в систему пользователя есть доступ.

  После завершения описанной выше настройкипользовательский v-доступКоманда может поддерживать настройку соответствующего режима

• [необязательно] является суперпользователем

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

 // 开始请求登录接口
      AccountLogin(vm.$vp, {
        username,
        password,
        imageCode
      })
        .then(async res => {
          // 修改用户登录状态
          vm.$vp.modifyLoginState(true)
          const menus = _delEmptyChildren(res.principal.admin.menus);
          const authorizeResources = _parseAuthorizePaths(res.principal.admin.authorizeResources);
          vm.$vp.rabcUpdateAuthorizedPaths(authorizeResources)
          const authorizeInterfaces = _parseAuthorizeInterfaces(res.principal.admin.authorizeInterfaces);
          vm.$vp.rabcUpdateAuthorizeInterfaces(authorizeInterfaces)
          const isSuperAdminStatus = _parseUserRoleIsSuperAdminStatus(res.principal.admin.roles);
          vm.$vp.rabcUpdateSuperAdminStatus(isSuperAdminStatus)

Для набора разрешений, которые необходимо установить, все ониПлоскийОдномерный массив , в формате, подобном:

authorizedPathsа такжеpublicPaths:

["/mngauth/admin", "/index", "/mngauth"]

authorizeInterfaces:

["admin/dels/*", "admin/search/*/*/*", "admin/*/*/*", "role/list/*", "admin/*"]

authorizeResourceAlias:

["MNG_USERMNG", "MNG_ROLEMNG"]

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

[/^((\/Interbus)(?!\/SubMenu)\/.+)$/]

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

<el-form v-access="['admin/search/*/*/*']" slot="search-inner-box" :inline="true" :model="searchForm" :rules="searchRules" ref="ruleSearchForm" class="demo-form-inline">
...
	<el-form-item class="search-inner-btn-box">
        <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="onCancelSubmit">重置</el-button>
      </el-form-item>
</el-form>

После завершения вышеуказанной конфигурации служба контроля разрешений, предоставляемая текущим модулем, конечно, может использоваться в обычном режиме, например,$vp.modifyLoginState|$vp#isLoginотносится кlogin-state-check.js 身份认证权限控制模块

строить планы

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

На самом деле, это не так сложно, как представлялось.Вы можете нажать, чтобы просмотреть исходный код

По сравнению с пониманием этой части, я думаю, что понимание принципов RBAC и структуры таблиц может лучше понять, почему он так контролируется.система разрешений jiiiiinЭтот проект внутреннего управления предназначен для структуры таблицы. Spring Security используется в фоновом режиме для завершения внутреннего контроля разрешений RBAC, и были внесены незначительные изменения в текущие требования к разрешениям внешнего интерфейса и путь к маршрутизатору vue. традиционный дизайн 5 таблиц золотого стандарта RBAC.

Пожалуйста, также поддержите нас :)

Ниже приводится API-описание модифицированного модуля:

настроить

debug|errorHandler|router|installedКонфигурация, вы можете просмотреть глобальную общую конфигурацию

publicPaths

/**
     * [*] 系统公共路由path路径集合，即可以让任何人访问的页面路径
     * {Array<Object>}
     * <p>
     *   比如登录页面的path，因为登录之前我们是无法判断用户是否可以访问某个页面的，故需要这个配置，当然如果需要这个配置也可以在初始化插件之前从服务器端获取，这样前后端动态性就更高，但是一般没有这种需求：）
     * <p>
     * 数组中的item，可以是一个**正则表达式字面量**，如`[/^((\/Interbus)(?!\/SubMenu)\/.+)$/]`，也可以是一个字符串
     * <p>
     * 匹配规则：如果在`LoginStateCheck#publicPaths`**系统公共路由path路径集合**中，那么就直接跳过权限校验
     */
publicPaths = []

authorizedPaths

/**
     * [*] 登录用户拥有访问权限的路由path路径集合
     * {Array<Object>}
     * <p>
     * 数组中的item，可以是一个**正则表达式字面量**，如`[/^((\/Interbus)(?!\/SubMenu)\/.+)$/]`，也可以是一个字符串
     * <p>
     * 匹配规则：如果在`LoginStateCheck#authorizedPaths`**需要身份认证规则集**中，那么就需要查看用户是否登录，如果没有登录就拒绝访问
     */
authorizedPaths = []

authorizeInterfaces

 /**
     * [*] 登录用户拥有访问权限的后台接口集合
     * {Array<Object>}
     * <p>
     *   1.在`v-access`指令配置为url（默认）校验格式时，将会使用该集合和指令声明的待审查授权接口列表进行匹配，如果匹配成功，则指令校验通过，否则校验不通过，会将对应dom元素进行处理
     *   2.TODO 将会用于在发送ajax请求之前，对待请求的接口和当前集合进行匹配，如果匹配失败说明用户就没有请求权限，则直接不发送后台请求，减少后端不必要的资源浪费
     * <p>
     * 数组中的item，可以是一个**正则表达式字面量**，如`[/^((\/Interbus)(?!\/SubMenu)\/.+)$/]`，也可以是一个字符串
     * <p>
     * 匹配规则：将会用于在发送ajax请求之前，对待请求的接口和当前集合进行匹配，如果匹配失败说明用户就没有请求权限，则直接不发送后台请求，减少后端不必要的资源浪费
     */
    authorizeInterfaces = []

authorizeResourceAlias

/**
     * [可选] 登录用户拥有访问权限的资源别名集合
     * {Array<Object>}
     * <p>
     * 数组中的item，可以是一个**正则表达式字面量**，如`[/^((\/Interbus)(?!\/SubMenu)\/.+)$/]`，也可以是一个字符串
     * <p>
     * 匹配规则：因为如果都用`LoginStateCheck#authorizeInterfaces`接口进行匹配，可能有一种情况，访问一个资源，其需要n个接口，那么我们在配置配置权限指令：v-access="[n, n....]"的时候就需要声明所有需要的接口，就会需要对比多次，
     * 当我们系统的接口集合很大的时候，势必会成为一个瓶颈，故我们可以为资源声明一个别名，这个别名则可以代表这n个接口，这样的话就从n+减少到n次匹配；
     */
authorizeResourceAlias = []

onLoginStateCheckFail

/**
     * [*] `$vp::onLoginStateCheckFail(to, from, next)`
     * <p>
     * 权限检查失败时被回调
     */
onLoginStateCheckFail = null

API-интерфейс

modifyLoginState

 /**
   * 代理`$vp#login-state-check`模块的同名方法，以实现在登出、会话超时踢出的时候清理本模块维护的登录之后设置的状态
   * @param status
   */
  modifyLoginState(status = false)

rabcUpdateSuperAdminStatus

  /**
   * 【可选】有些系统存在一个超级用户角色，其可以访问任何资源、页面，故如果设置，针对这个登录用户将不会做任何权限校验，以便节省前端资源
   * @param status
   */
  rabcUpdateSuperAdminStatus(status)

rabcAddAuthorizedPaths

 /**
   * 添加授权路径集合
   * 如：登录完成之后，将用户被授权可以访问的页面`paths`添加到`LoginStateCheck#authorizedPaths`中
   * @param paths
   */
  rabcAddAuthorizedPaths(paths)

rabcUpdateAuthorizedPaths

/**
   * 更新授权路径集合
   * @param paths
   */
  rabcUpdateAuthorizedPaths(paths)

rabcUpdateAuthorizeResourceAlias

/**
   * 更新资源别名集合
   * @param alias
   */
  rabcUpdateAuthorizeResourceAlias(alias)

rabcAddAuthorizeResourceAlias

/**
   * 添加资源别名集合
   * @param alias
   */
  rabcAddAuthorizeResourceAlias(alias)

rabcUpdatePublicPaths

 /**
   * 更新公共路径集合
   * @param paths
   */
  rabcUpdatePublicPaths(paths)

rabcAddPublicPaths

/**
   * 添加公共路径集合
   * @param paths
   */
  rabcAddPublicPaths(paths)

Если вы найдете это полезным, пожалуйста, поддержите его, добавьте больше модулей, пожалуйста.Нажмите, чтобы просмотреть

• серия статей

  • Метод мобильной гибридной разработки и передачи данных между клиентами с использованием Vue
  • Метод состояния страницы Vue для поддержки передачи данных между страницами.
  • Метод аутентификации и управления разрешениями для интерфейсных приложений Vue.
  • Vue — это способ сократить шаблонный код, взаимодействующий с сервером.
  • Метод аутентификации и управления разрешениями для интерфейсных приложений Vue.