VPC

VPC

Vue-Berechtigungskontrolle

Projektbeschreibung

Ein auf Vue basierendes Backend-System für die einheitliche Anmeldung und Verwaltung von Front-End-Benutzerrechten

Projektadresse

• Dave-Wind

Bauen

 # 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

Projektanalyse

Grundgedanke

Empfängnis

Das Front-End übernimmt die Berechtigungskontrolle, was nichts weiter ist als die Übermittlung von Daten an den Hintergrund. Ich habe gesehen, dass das Konzept der Rollen im Front-End groß ist Die Anzahl der Rollen, die entkoppelt werden müssen, wird künstlich vorgeschlagen. Tatsächlich betrachtet das Frontend nur die Daten und extrahiert die Berechtigungen, die dem Frontend in verschiedene Arrays gegeben und dann mit allen lokalen Routen abgeglichen werden, um ein Menü zurückzugeben dem Benutzer anzuzeigen.

Skeleton

Nachdem vue-cli das Projekt initialisiert hat, besteht es aus modularen Grundgerüstkomponenten: Login + Home-Header, Seitenleiste, Home und Geschäftsinhalte können in Hoem-Inhalten platziert werden.

Einloggen

VPC eignet sich für die einheitliche Anmeldung mehrerer Projekte. Das nach erfolgreicher Anmeldung auf der Anmeldeseite zurückgegebene gültige Token wird im zweiten Schritt ausgeführt, um Benutzerdaten zu erhalten. In Anbetracht des Aktualisierungsproblems müssen Benutzerdaten abgerufen werden in der Stammkomponente App.vue. Da es sich bei Vue um eine unidirektionale Flussidee handelt, muss Login als Unterkomponente der App nach erfolgreicher Anmeldung $emit an die App senden und einen Rückruf ausführen, um Benutzerdaten zu erhalten.

Schnittstellenmodell

Wie oben erwähnt, verwendet dieses Projekt Easy-Mock-Mock-Daten. Die Back-End-Datenvorschriften verwenden das RestFul-Protokoll, um mehrere Benutzer mit unterschiedlichen Identitäten zu verspotten. Bei erfolgreicher Anmeldung wird ein Token im Header zurückgegeben über Flyio. Denken Sie daran, dass dies das erste Mal ist. Nachdem Sie es zur Anmeldeseite hinzugefügt haben, müssen Sie für jeden Schnittstellenaufruf ein Token hinzufügen, was im Flyio-Interceptor erfolgen kann.

Benutzerdatenoperationen

Geben Sie das Berechtigungsarray auf der App-Seite über rekursiven FullPath zurück. Alle lokalen Routing-Vorgänge erhalten die effektive Route des Benutzers und speichern sie in Vuex.

Seitenanzeige

In der Sidebar for-Schleife wird die in vuex gespeicherte effektive Route angezeigt und die Home-Komponente wird angezeigt, um den spezifischen Inhalt der Route anzuzeigen.

Designkomposition

Struktur

 │
├─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

Projektmodul

Login

• Das Projekt eignet sich für die einheitliche Anmeldung mit mehreren Back-End-Systemen. Eine Zugangs-Anmeldeschnittstelle ist eine normale Passwort-Anmeldung. Das Token wird in der Autorisierung zurückgegeben.
• Akzeptieren Sie in App.vue, der Router-Ansicht der Stammkomponente, die Unterkomponente $emit und führen Sie dann die Anmeldemethode aus, um die Schnittstelle aufzurufen, um die Berechtigungsdaten einheitlich abzurufen und in der App zu vervollständigen.

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

Einheitliche Clear-Funktion

Der Kodex sieht den Zweck vor, einen Eingang und einen Ausgang zu haben.

• Löschen Sie das Token und aktualisieren Sie die Seite, nachdem die Abmeldung der Header-Komponente ausgeführt wurde.
• Da wir feststellen, ob in der Root-Komponente App ein Token vorhanden ist, sind beim Abmelden keine Routing-Sprünge erforderlich.
• Solange login.vue initialisiert ist, wird „clearData“ ausgeführt, um alle Daten zu löschen.

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

Token ungültig

Die globale Abfangantwort von Flyio springt zur Anmeldeseite zurück, solange der ungültige Benutzer auf die Seite zugreift, den Statuscode für den Schnittstellenfehler aufruft und 401 zurückgibt.

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

Flyio

• Flyio ist großartig und kann in verschiedenen Umgebungen von Browserknoten und mobilen Applets verwendet werden. Die Importkonfiguration ist wie folgt.
• Flyio verwendet das WX-Paketmodul im Miniprogramm. Weitere Informationen finden Sie auf der offiziellen Website oder bei mpvue-netBar.

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

• Im persönlichen Test von flyio gibt es keine JSONP-Methode. Derzeit besteht die domänenübergreifende Lösung darin, Access-Control-Allow-Origin: „*“ im Header des Backends festzulegen.
• Dieses Projekt verwendet Ajax JSONP (sind wir zurück in der Ära des Schreibens von JQuery? JQuery ist wirklich leistungsstark!!)

Komponentenregistrierung

Webpack-Artefakt require.context

• Verwenden Sie require.context, um die Komponenten unter dem angegebenen Pfad zu lesen. Wir müssen beispielsweise viele öffentliche UI-Komponenten schreiben, aber es ist sehr mühsam, sie jedes Mal zu importieren, also verwenden Sie es.
• Der Effekt besteht darin, dass die automatische dynamische Anforderungskomponente drei Parameter erfordert: ob das zu durchsuchende Dateiverzeichnis nach seinen Unterverzeichnissen und einem regulären Ausdruck durchsucht werden soll, und das war’s.

Verpackungsoptimierung

• npm run build --report kann die dist-Paketgröße analysieren, um die verdammte Datei nach und nach zu zerstören
• Ändern Sie die Konfiguration index.js ProductionSourceMap und cssSourceMap auf „false“, um die verdammte Kartendatei zu zerstören.
• Nachdem Sie npm install --save-dev compress-webpack-plugin installiert haben, setzen Sie ProductionGzip auf true und aktivieren Sie den Yasuo-Komprimierungsmodus. Sie können es auch versuchen.
• Asynchrone Komponenten, aber um ehrlich zu sein, können asynchrone Komponenten die Dist-Größe nicht wesentlich optimieren.
• cdn extern geladene Ressourcen webpack.base.conf.js plus externe Ressourcen (obwohl ich es jedes Mal falsch buchstabiere)

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

• Laden Sie dann die CDN-Ressource in den Index. Beachten Sie, dass Vue.use nicht in den Code aller externen Autos geschrieben werden kann. Andernfalls ist das Laden von CDN Unsinn, da Vue.use das von Vue geschriebene Plug-In ist und auf Vue gemountet wird Prototyp.

Automatische Bereitstellung

Weitere Informationen finden Sie auf der offiziellen Website von Travis CI. Hinweis:

• Die Webpack-Konfiguration muss in der in config index.js integrierten VPC in assetPublicPath: '' anstelle des Stammverzeichnisses '/' geändert werden, andernfalls ist js 404
• Die spezifischen Ergebnisse der Travis-CI-Konfiguration sind unterschiedlich. Weitere Informationen finden Sie auf der offiziellen Website oder folgen Sie der VPC .travis.yml-Konfiguration.

technische Analyse

Analyse der Kommunikationsnutzung von Vue-Komponenten

1.Vuex: Statusverwaltungsmodus, zentralisierte Speicherverwaltung des Status aller Komponenten der Anwendung und entsprechende Regeln, um sicherzustellen, dass sich der Status auf vorhersehbare Weise ändert. 2.EventBus: Die Kommunikation von nicht übergeordneten und untergeordneten Komponenten erfolgt mithilfe von Ereigniszentren Komponenten zulassen. Freie Kommunikationsfallreproduktion: Was soll ich tun, wenn ich beispielsweise einen variablen Attributwert in der Header-Komponente in diesem Projekt ändere und die SideBar- und Home-Komponenten auf die Änderung reagieren müssen? 3. Analyse: Vuex verwaltet, wie der Name schon sagt, globale Variablen, die lesbar, veränderbar und erkennbar sind. Lassen Sie uns zunächst die beiden Attribute von ECMAScript vorstellen : Datenattribute und Zugriffsattribute. Ersteres: [Konfigurierbar], [[Aufzählbar], [Schreibbar], [Wert] Konfigurierbarer, aufzählbarer, überschreibbarer Wert Normalerweise erstellt ein Objektliteral ein Objekt var person = { name: "dave" } Das heißt, was die Datenattribute ändern und lesen, ist nur der Wert des Objekts und die letzteren Accessor-Eigenschaften [Configurable]], [[Enumerable]], [[Get]], [[Set], in JavaScript verwenden wir Object .defineProperty zum Definieren des Zugriffs Um this.person in Vue zu erhalten, besteht das Geräteattribut darin, die get-Methode aufzurufen, um sie festzulegen, bei der es sich um die set-Methode handelt. Vue verfügt über einen eigenen Datenbaum. Über das Accessor-Attribut wird die Abhängigkeitsverfolgungsüberwachung implementiert. Zusätzlich zu Vuex EventBus verfügen Vue.prototype.xx und this.$root- und lokale Speicher-LocalStorage-Operationsvariablen nicht über die Überwachungsfunktion.

4. Zusammenfassung: Vue.prototype.xx, this.$root kann nur gelesen und geändert werden, aber standardmäßig kann Vue.prototype.xx keine globalen Variablen schreiben. Werte usw. funktionieren auch auf localStorage. Es kann Einstellungen lesen. Einige Leute sagen, dass Sie addEventListener zum Überwachen des Speichers verwenden können, aber Sie erwarten nicht, dass dies in der Vue-Ebene der Fall ist vuex. Wir benötigen die Variablen, um vorhersehbar zu sein, und führen dann den Rückruf aus. Wenn Sie denken, dass Sie in Schwierigkeiten sind, verwenden Sie einfach EventBus-Geschwisterkomponenten, um zu kommunizieren, und $emit löst den $on-Listening-Rückruf aus.

Eine Zigarette danach

Der Schwerpunkt dieses Projekts liegt nicht auf der Notwendigkeit umfangreicher Hintergrundkomponenten, sondern auf der Idee der Berechtigungsrouting-Steuerung. Es geht lediglich darum, ein Grundgerüst zur Zusammenfassung Ihrer Arbeit zu erstellen „Projekt“ substanzieller und robuster machen.