Об управлении разрешениями маршрутизации Vue

предисловие

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

выполнить

В общем идея реализации очень проста.Сначала картинка выше:

permission-control

Это не что иное, как разделение конфигурации маршрутизации по типу пользователя на用户路由а также基本路由, разные типы пользователей могут иметь разные用户路由, в зависимости от фактического бизнеса.

用户路由: Маршрут для текущего пользователя
基本路由: Маршруты доступны всем пользователям

Есть два способа добиться контроля:

пройти черезvue-router addRoutesКонтроль реализации маршрутизации внедрения метода
пройти черезvue-router beforeEachХуки ограничивают переходы маршрутизации

Метод addRoutes:

Получите текущую конфигурацию маршрутизации пользователя, запросив сервер и закодировав ее в базовом формате, поддерживаемом vue-router (конкретная кодировка зависит от формата данных, согласованного между интерфейсом и сервером), и вызвавthis.$router.addRoutesМетод внедряет закодированный пользовательский маршрут в существующий экземпляр vue-router для реализации пользовательского маршрута.

перед каждым методом

Получите текущую конфигурацию маршрутизации пользователя, запросив сервер, и зарегистрируйтесьrouter.beforeEachХук управляет каждым переходом маршрута и проверяет каждый переход.Если целевой маршрут не существует, он недоступен в基本路由и текущий пользователь用户路由, отмените переход и перейдите на страницу ошибки перехода.

Оба вышеуказанных метода должныvue-routerНастройте страницу ошибки в конфигурации, чтобы пользователи воспринимали недостаточные разрешения.

Принцип обоих методов фактически одинаков, ноaddRoutes 方式рассказать, внедрив конфигурацию маршрутаvue-router: «В настоящее время у нас есть только эти маршруты, и мы не распознаем другие адреса маршрутизации», иbeforeEachЭто больше зависит от нас, чтобы вручную помочьvue-routerОпределите, на какие страницы вы можете перейти, а на какие нет. Грубо говоря, то есть自动а также手动разница. Говоря об этом, предполагается, что каждый почувствует, что, поскольку自动Да, это точноaddRoutesОн самый удобный и быстрый, а еще он может упростить бизнес-код Автор тоже так думал в начале, но! Многие упускают из виду один момент:

vue-router-addRoutes

addRoutesЭтот метод только помогает вам вводить новые маршруты и не помогает вам устранять другие маршруты!

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

Также есть обходной путь для этой проблемы:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const createRouter = () => new Router({
  mode: 'history',
  routes: []
})
const router = createRouter()
export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}
export default router

Создав новыйRouter, затем вставьте новыйRouter.matcherУправление закреплено за текущей страницейRouter, чтобы достичь цели обновления конфигурации маршрутизации.

Автор сделалНебольшая демонстрация, все могут идтииспытать это.

По вышеуказанным вопросам вvue-routerБыли обсуждения по вопросам github, а именно:

Add option to Reset/Delete Routes #1436
Feature request: replace routes dynamically #1234

Желающие могут пойти и посмотреть.