VPC

ВПК

Управление разрешениями Vue

Описание проекта

Бэкэнд-система для унифицированного управления правами пользователей при входе в систему, разработанная на основе vue.

Адрес проекта

• Дэйв-Ветер

Строить

 # install node+git please

# install dependencies
$ npm install / cnpm install

# serve with hot reload at localhost:8060
$ npm run dev

# build for production with minification
$ npm run build

Анализ проекта

Основная идея

Задумать

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

скелет

После того, как vue-cli инициализирует проект, он состоит из модульных скелетных компонентов: Вход + Главная Боковая панель заголовка Домашняя страница и бизнес-контент могут быть размещены в контенте Hoem.

Авторизоваться

VPC подходит для единого входа в несколько проектов. Действительный токен, возвращаемый после успешного входа на страницу входа, выполняется на втором этапе для получения пользовательских данных. Учитывая проблему обновления, необходимо разместить данные пользователя. в корневом компоненте App.vue. Поскольку Vue представляет собой идею одностороннего потока, вход в качестве подкомпонента приложения должен передать $emit приложению после успешного входа в систему и выполнить обратный вызов для получения пользовательских данных.

Макет интерфейса

Как упоминалось выше, в этом проекте используются фиктивные данные easy-mock. В правилах серверных данных используется протокол RestFul для имитации нескольких пользователей с разными идентификаторами. При успешном входе в систему возвращается 200, аннулирование токена — 401. При успешном входе в заголовок возвращается токен. через Flyio. Помните, что это первый раз. После добавления на страницу входа вам необходимо добавить токен для каждого вызова интерфейса, что можно сделать в перехватчике Flyio.

Операции с пользовательскими данными

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

Отображение страницы

На боковой панели цикла for отображается эффективный маршрут, сохраненный в vuex, и отображается компонент Home для отображения конкретного содержимого маршрута.

дизайн композиции

структура

 │
├─build
│      build.js
│      check-versions.js
│      utils.js
│      vue-loader.conf.js
│      webpack.base.conf.js
│      webpack.dev.conf.js
│      webpack.prod.conf.js
│
├─config
│      dev.env.js
│      index.js
│      prod.env.js
│
├─src
│  │  404.vue
│  │  App.vue                                // 根组件
│  │  bus.js                                 // EventBus 适用于兄弟组件 通信
│  │  dave.js                                // canvas 效果
│  │  globar.js                              // webpack 全局注册ui组件
│  │  main.js                                // 项目入口
│  │  tools.js                               // 插件
│  │
│  ├─api
│  │      axios.js
│  │      common.js                          // 基本接口
│  │      request.js                         // flyio 拦截器
│  │      weather.js                         // 天气接口
│  │
│  ├─assets
│  │  │  logo.png
│  │  │
│  │  └─theme-dave                            // 自定义主题
│  │
│  ├─components                               // 主要组件
│  │  ├─common
│  │  │      Header.vue
│  │  │      Home.vue
│  │  │      Login.vue
│  │  │      SideBar.vue
│  │  │
│  │  ├─render                                 // render 渲染组件 适用多条件渲染
│  │  │      btn-render.vue
│  │  │
│  │  ├─ui
│  │  │      baseButton.vue                    // 基于element-ui btn ui组件 可层叠复用
│  │  │
│  │  └─view
│  │          403.vue
│  │          404.vue
│  │          allocation.vue
│  │          render.vue
│  │          watch.vue
│  │
│  ├─router                                    // 本地所有路由
│  │      fullPath.js
│  │      index.js                             // 基本路由
│  │
│  └─store                                     // 状态管理 全局变量
│          actions.js
│          getters.js
│          index.js
│          mutations.js
│          state.js
│
│  .babelrc
│  .editorconfig
│  .eslintignore
│  .eslintrc.js                                 // 基于airbnb-base 个人配置的代码规则
│  .gitignore
│  .postcssrc.js
│  index.html
│  package-lock.json
│  package.json
│  README.md

модуль проекта

авторизоваться

• Проект подходит для единого входа в систему с несколькими серверными системами. Интерфейс входа в систему с одним входом представляет собой обычный вход с паролем. Токен возвращается и сохраняется в разделе авторизации.
• В App.vue, который является корневым компонентом router-view, примите подкомпонент $emit, а затем выполните метод входа в систему, чтобы вызвать интерфейс, чтобы единообразно получить данные разрешений и завершить их в приложении.

 < router-view @login =" login " @clearData =" clearData " > </ router-view > 

Единая функция очистки

Кодекс придерживается принципа одного входа и одного выхода.

• Очистите токен и обновите страницу после выхода из системы компонента заголовка.
• Поскольку мы определим, есть ли токен в корневом компоненте App, нет необходимости маршрутизировать переходы при выходе из системы.
• Пока инициализируется файл login.vue, выполняется очистка данных для очистки всех данных.

 clearData ( ) {
 if ( this . $route . path === '/login' ) {
     delete request . config . headers [ 'Authorization' ] ;
     localStorage . removeItem ( 'token' ) ;
     this . $store . dispatch ( 'CLEAR_STORE' ) ;
 }       
} 

токен недействителен

Глобальный ответ перехвата Flyio вернется на страницу входа в систему, пока недействительный пользователь получит доступ к странице, вызовет код состояния сбоя интерфейса и вернет 401.

 if ( err . response . status === 401 ) {
    window . location . href = '/#/login' ;
  } 

флайо

• Flyio великолепен. VPC можно использовать в различных средах узла браузера и мобильных апплетах. В webpack.base.conf.js конфигурация импорта следующая.
• Flyio использует модуль пакета wx в мини-программе. Подробности можно найти на официальном сайте или в mpvue-netBar.

alias: {
  'vue$' : 'vue/dist/vue.esm.js' ,
  '@' : resolve ( 'src' ) ,
  'flyio' : 'flyio/dist/npm/fly'
    }
    

• В личном тесте Flyio нет метода jsonp. В настоящее время междоменное решение заключается в установке Access-Control-Allow-Origin: '*' в заголовке на серверной части.
• В этом проекте используется ajax jsonp (мы вернулись в эпоху написания jquery? jquery действительно мощный!!)

Регистрация компонентов

артефакт веб-пакета require.context

• Используйте require.context для чтения компонентов по указанному пути. Например, нам нужно написать много общедоступных компонентов пользовательского интерфейса, но импортировать их каждый раз очень затруднительно, поэтому используйте его.
• В результате компонент автоматического динамического запроса требует три параметра: следует ли искать в каталоге файлов, в котором выполняется поиск, его подкаталоги и регулярное выражение, и все.

Оптимизация упаковки

• npm run build --report может проанализировать размер дистрибутивного пакета, чтобы постепенно уничтожить этот чертов файл.
• Измените настройки index.js ProductionSourceMap и cssSourceMap на false, чтобы уничтожить этот чертов файл карты.
• После установки npm --save-dev Compression-webpack-plugin установите для ProductionGzip значение true и включите режим Yasuo. Сжатие также уменьшит размер. Вы также можете попробовать.
• Асинхронные компоненты, но, честно говоря, асинхронные компоненты не могут существенно оптимизировать размер dist.
• cdn загружаемые извне ресурсы webpack.base.conf.js плюс внешние ресурсы (хотя я каждый раз пишу это с ошибкой)

 externals: {
    vue : 'Vue' ,
    'element-ui' : 'ElementUI' ,
    nprogress : 'NProgress' ,
    jquery : 'window.$'
  }
  

• Затем загрузите ресурс cdn в индекс. Помните, что Vue.use не может быть записан в коде всех внешних машин. В противном случае загрузка cdn бессмысленна, поскольку Vue.use — это плагин, написанный Vue, и он будет установлен на Vue. прототип.

Автоматическое развертывание

Для получения подробной информации посетите официальный сайт Трэвиса CI. Примечание:

• Конфигурацию веб-пакета необходимо изменить в конфигурации index.js, встроенной в VPC, на assetsPublicPath: '' вместо корневого каталога '/', иначе js будет 404.
• Конкретные результаты конфигурации travis-CI отличаются. Подробную информацию можно найти на официальном сайте или в конфигурации VPC .travis.yml.

технический анализ

Анализ использования связи компонентов Vue

1.Vuex: режим управления состоянием, централизованное управление хранилищем состояния всех компонентов приложения и соответствующие правила, обеспечивающие предсказуемое изменение состояния. 2.EventBus: связь между неродительскими и дочерними компонентами использует центры событий для Разрешить компонентам воспроизведение случая свободного общения: что мне делать, если, например, я меняю значение атрибута переменной в компоненте Header в этом проекте и требую, чтобы компоненты SideBar и Home отреагировали на это изменение? 3. Анализ: Vuex, как следует из названия, управляет глобальными переменными. Здесь речь идет об управлении, а не только для чтения, которые доступны для чтения, изменения и обнаружения. Во-первых, давайте представим два атрибута ECMAScript. : атрибуты данных и атрибуты доступа. Первые: [Configurable], [[Enumerable], [Writable], [Value] Настраиваемое, перечислимое, переопределяемое значение. Обычно литерал объекта создает объект var person = { name: "dave" } То есть то, что изменяются и считываются атрибуты данных, — это только значение объекта, а последние свойства доступа [Configurable]], [[Enumerable]], [[Get]], [[Set], в JavaScript мы используем Object .defineProperty для определения доступа. Чтобы получить this.person во Vue, атрибут устройства должен вызвать метод get, чтобы установить его, который является методом set. У Vue есть собственное дерево данных. Именно посредством атрибута доступа реализуется наблюдение за отслеживанием зависимостей. В дополнение к Vuex EventBus, Vue.prototype.xx и переменные компонента операции localStorage this.$root и локального хранилища не имеют функции наблюдения.

4. Краткое описание: Vue.prototype.xx, this.$root можно только читать и изменять. Вы можете изменять и читать прототип Vue, но не можете наблюдать. Vue.prototype.xx по умолчанию может записывать глобальные переменные для калибровки и проверки. Значения и т. д. также действуют на localStorage. Он может читать настройки. Некоторые говорят, что вы можете использовать addEventListener для мониторинга хранилища, но вы не ожидаете, что это будет сделано на уровне Vue. Суть этого проекта заключается в использовании локального хранилища. vuex. Нам нужно, чтобы переменные были предсказуемыми, а затем выполняли обратный вызов. Если вы думаете, что у вас проблемы, просто используйте родственные компоненты EventBus для связи, и $emit запускает обратный вызов $on прослушивания.

Сигарета после этого

Основное внимание в этом проекте уделяется не необходимости в богатых фоновых компонентах, а идее управления маршрутизацией разрешений. Это просто создание скелета для подведения итогов вашей работы. Позже в проект будут добавлены дополнительные инкапсулированные компоненты. «проект» более существенный и надежный.