VPC

VPC

Contrôle des autorisations Vue

Descriptif du projet

Un système backend pour la gestion unifiée des droits des utilisateurs front-end de connexion développé sur la base de vue

Adresse du projet

• Dave-vent

Construire

 # 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

Analyse du projet

Idée de base

Concevoir

Le front-end effectue le contrôle des autorisations, ce qui n'est rien d'autre que la transmission de données en arrière-plan. J'ai vu que la plupart des projets ont le concept de rôle. de rôles qui doivent être découplés est artificiellement proposé. En fait, le frontal examine uniquement les données et extrait les autorisations. Différents rôles d'identité sont attribués au frontal dans différents tableaux, puis mis en correspondance avec toutes les routes locales pour renvoyer un menu. à afficher à l'utilisateur.

squelette

Une fois que vue-cli a initialisé le projet, il est composé de composants squelettes modulaires : Connexion + Home Header Sidebar Home et le contenu professionnel peut être placé dans le contenu Hoem.

Se connecter

VPC convient à la connexion unifiée de plusieurs projets. Le jeton valide renvoyé après une connexion réussie sur la page de connexion est effectué dans la deuxième étape pour obtenir les données utilisateur. Les données sont enregistrées dans vuex. Compte tenu du problème d'actualisation, l'obtention des données utilisateur doit être effectuée. dans le composant racine App.vue Étant donné que Vue est une idée de flux unidirectionnel, la connexion, en tant que sous-composant de l'application, doit émettre $ vers l'application après une connexion réussie et exécuter un rappel pour obtenir les données utilisateur.

Maquette d'interface

Comme mentionné ci-dessus, ce projet utilise des données simulées faciles. Les réglementations sur les données back-end utilisent le protocole RestFul pour simuler plusieurs utilisateurs avec des identités différentes. Une connexion réussie renvoie 200, une invalidation de jeton 401. Une connexion réussie renvoie un jeton dans l'en-tête. via flyio. N'oubliez pas que c'est la première fois. Après l'avoir ajouté à la page de connexion, vous devez ajouter un jeton pour chaque appel d'interface, ce qui peut être effectué dans l'intercepteur flyio.

Opérations sur les données utilisateur

Renvoyez le tableau d'autorisations sur la page de l'application via fullPath récursif. Toutes les opérations de routage locales obtiennent l'itinéraire effectif de l'utilisateur et l'enregistrent dans Vuex.

Affichage des pages

Dans la barre latérale pour la boucle, l'itinéraire effectif stocké dans vuex est affiché et le composant Accueil est affiché pour afficher le contenu spécifique de l'itinéraire.

composition de conception

structure

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

module projet

se connecter

• Le projet convient à une connexion unifiée avec plusieurs systèmes back-end. Une interface de connexion d'entrée est une connexion par mot de passe normale. Le jeton est renvoyé et stocké dans l'autorisation.
• Dans App.vue, qui est la vue du routeur du composant racine, acceptez le sous-composant $emit, puis exécutez la méthode de connexion pour appeler l'interface afin d'obtenir les données d'autorisation de manière uniforme et de les compléter dans l'application.

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

Fonction claire unifiée

Le code adhère au but d’une entrée et d’une sortie.

• Effacez le jeton et actualisez la page après l'exécution de la déconnexion du composant d'en-tête.
• Étant donné que nous déterminerons s'il existe un jeton dans l'application du composant racine, il n'est pas nécessaire de routage des sauts lors de la déconnexion.
• Tant que login.vue est initialisé, clearData est exécuté pour effacer toutes les données.

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

jeton invalide

La réponse d'interception globale de Flyio reviendra à la page de connexion tant que l'utilisateur non valide accède à la page et appelle le code d'état d'échec de l'interface et renvoie 401.

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

flyio

• flyio est génial. VPC peut être utilisé dans différents environnements de nœud de navigateur et d'applets mobiles dans webpack.base.conf.js, la configuration d'importation est la suivante.
• Flyio utilise le module de package wx dans le mini programme. Pour plus de détails, veuillez consulter le site officiel ou mpvue-netBar.

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

• Il n'y a pas de méthode jsonp dans le test personnel de flyio. Actuellement, la solution inter-domaines consiste à définir Access-Control-Allow-Origin: '*' dans l'en-tête du backend.
• Ce projet utilise ajax jsonp (sommes-nous de retour à l'ère de l'écriture de jquery ? jquery est vraiment puissant !!)

Enregistrement des composants

artefact webpack require.context

• Utilisez require.context pour lire les composants sous le chemin spécifié. Par exemple, nous devons écrire de nombreux composants d'interface utilisateur publics, mais il est très difficile de les importer à chaque fois, alors utilisez-le.
• L'effet est que le composant de requête dynamique automatique nécessite trois paramètres : si le répertoire de fichiers à rechercher doit être recherché pour ses sous-répertoires et une expression régulière, et c'est tout.

Optimisation des emballages

• npm run build --report peut analyser la taille du paquet dist pour détruire progressivement ce foutu fichier
• Modifiez la configuration index.js productionSourceMap et cssSourceMap sur false afin de tuer ce foutu fichier de carte.
• Après npm install --save-dev compression-webpack-plugin, définissez productionGzip sur true et activez le mode Yasuo. La compression réduira également la taille.
• Composants asynchrones, mais à vrai dire, les composants asynchrones ne peuvent pas beaucoup optimiser la taille de la distribution.
• cdn ressources chargées en externe webpack.base.conf.js plus externes (même si je l'épelle mal à chaque fois)

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

• Chargez ensuite la ressource cdn dans l'index. N'oubliez pas que Vue.use ne peut pas être écrit dans le code de toutes les voitures externes, sinon le chargement cdn n'a aucun sens car Vue.use est le plug-in écrit par Vue et sera monté sur Vue. prototype.

Déploiement automatique

Pour plus de détails, veuillez visiter le site officiel de Travis CI Remarque :

• La configuration du webpack doit être modifiée dans le VPC intégré config index.js en actifsPublicPath : ' au lieu du répertoire racine '/' sinon js sera 404
• Les résultats de configuration spécifiques à Travis-CI sont différents. Pour plus de détails, veuillez consulter le site officiel ou suivre la configuration du VPC .travis.yml.

analyse technique

Analyse de l'utilisation de la communication des composants Vue

1.Vuex : mode de gestion d'état, gestion centralisée du stockage de l'état de tous les composants de l'application et règles correspondantes pour garantir que l'état change de manière prévisible 2.EventBus : la communication des composants non parents et enfants utilise des centres d'événements pour autoriser les composants Reproduction gratuite du cas de communication : que dois-je faire lorsque, par exemple, je modifie la valeur d'un attribut variable dans le composant Header de ce projet et que j'exige que les composants SideBar et Home répondent au changement ? 3. Analyse : Vuex, comme son nom l'indique, gère les variables globales. Ici, c'est la gestion, et non la lecture seule, qui est lisible, modifiable et détectable. Vue est un flux unidirectionnel. Tout d'abord, introduisons les deux attributs d'ECMAScript. : attributs de données et attributs d'accesseur. Les premiers : [Configurable], [[Enumerable], [Writable], [Value] Valeur configurable, énumérable et remplaçable. Généralement, un littéral d'objet crée un objet var person = { name: "dave" } Autrement dit, ce que les attributs de données modifient et lisent n'est que la valeur de l'objet, et ces dernières propriétés d'accesseur [Configurable]], [[Enumerable]], [[Get]], [[Set], en JavaScript, nous utilisons Object .defineProperty pour définir l'accès Pour obtenir this.person dans Vue, l'attribut de périphérique doit appeler la méthode get pour le définir, qui est la méthode set. Vue a sa propre arborescence de données.C'est via l'attribut accesseur que la surveillance du suivi des dépendances est implémentée. En plus de Vuex EventBus, Vue.prototype.xx et this.$root et les variables des composants d'opération de stockage localStorage n'ont pas la fonction watch.

4. Résumé : Vue.prototype.xx, this.$root ne peut être lu et modifié que sur le prototype Vue mais ne peut pas regarder Vue.prototype.xx peut écrire des variables globales pour l'étalonnage et la vérification par défaut. Les valeurs, etc. fonctionnent également sur localStorage. Il peut lire les paramètres. Certaines personnes disent que vous pouvez utiliser addEventListener pour surveiller le stockage, mais vous ne vous attendez pas à le faire dans la couche Vue. Le jeton de ce projet est d'utiliser le stockage local. vuex.Nous avons besoin que les variables soient prévisibles, puis exécutons le rappel. Si vous pensez que vous avez des problèmes, utilisez simplement les composants frères d'EventBus pour communiquer, et $emit déclenche le rappel $on listening.

Une cigarette après

Ce projet ne se concentre pas sur la nécessité de composants d'arrière-plan riches, mais sur l'idée de contrôle du routage des autorisations. Il s'agit simplement de construire un squelette pour résumer votre travail. Plus tard, des composants plus encapsulés seront ajoutés au projet pour créer le projet. "projet" plus substantiel et robuste.