Partage de code de contrôle des autorisations de vue-router

Cet article vous présente principalement l'exemple de code du contrôle des autorisations vue-router. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Le système de gestion backend de l'entreprise a été récemment construit et le système est relativement volumineux. Les points suivants doivent être atteints :

• Autorisations de menu, affichage différent. selon différentes autorisations Menu

• autorisations d'opération, par exemple, certains comptes n'ont pas l'autorisation d'ajouter, et certains n'ont pas l'autorisation de modifier ou de supprimer

• autorisations de données, telles que l'aperçu statistique, les administrateurs ordinaires ne peuvent pas voir l'aperçu des activités de l'entreprise, mais ils peuvent voir l'aperçu de leur région

• autorisations d'affichage, telles que les listes, les opérations peut voir le montant du contrat dans cette colonne, mais le marché ne peut pas voir la colonne du montant du contrat

Il est encore en construction jusqu'à présent, et les autorisations de menu et les autorisations d'opération ont été résolues.

Autorisations de menu :

Au début, nous avons également suivi la méthode indiquée ci-dessus. Nous configurons d'abord un ensemble d'itinéraires localement, puis après une connexion réussie, une liste de menus sera affichée. renvoyé par le serveur. Ensuite, dans beforeEach, la liste de menus renvoyée est comparée à la route configurée localement. Si elle existe, elle a l'autorisation d'accéder. Après avoir travaillé dessus pendant quelques jours, j'ai eu du mal à l'utiliser. J'ai dû configurer un ensemble complet de routes localement, et j'ai également dû créer plusieurs pages pour écrire les informations de routage sur le serveur, afin d'attribuer des autorisations. Lorsque vous avez beaucoup de menus d'autorisations, comme le nôtre. Dans ce backend, il existe plusieurs ensembles d'autorisations internes à l'entreprise, ainsi que des autorisations d'agent, de commerçant, etc. Il peut y avoir plus de centaines de menus différents. Une telle configuration est trop fatigante et. sujet aux erreurs.

La solution finale est de ne faire aucune configuration de routage localement. La page de connexion est créée séparément et non placée dans le composant vue. Une fois la connexion réussie, la liste de menus est récupérée dans le composant vue. arrière-plan car la connexion est réussie maintenant, donc ce que vous récupérez, c'est un tout nouveau menu. Après avoir réussi la récupération, configurez-le dans la route, puis instanciez vue. Cela évite d'avoir à configurer un ensemble de routes localement et configure la route entièrement sur le serveur.

La seule difficulté résolue de cette manière est que le routage nécessite des composants correspondants, nous stockons donc tous les composants dans un objet. Dans la liste de menu renvoyée par le serveur, il y aura un champ pour configurer le composant. name. lorsque la configuration de routage est générée une fois la récupération réussie, utilisez simplement router[menuName] pour la charger directement dans ce composant, ce qui est très pratique.

Extrait de code main.js :

// 实例化Login类并初始化
 new Login(function (err, data) {
  if (err) {
   // 登录出错
  } else {
   // 登录成功
   init(data);
  }
 }).init();

const init = function (data) {
 // 先配置路由信息
 // componentConfigs 是本地的组件配置
 let routers = assignRouter(data.menus, componentConfigs);
 // 实例化路由
 router = new Router({routes: routers});
 // 再实例化vue
 new Vue({
  el: '#app',
  store,
  router,
  nprogress,
  ...App
 });
};

Extrait de codecomponentConfigs.js :

export default {
 Common: {
  Admin: require('../../vue/pages/common/Admin'),
  Index: require('../../vue/pages/common/Index'),
  UpdatePassword: r => require.ensure([], () => r(require('../../vue/pages/users/UpdatePassword')), 'users')
 }
}

Le menu json renvoyé par le serveur :

Le champ méta contient les autorisations d'opération dans la route actuelle

[{
      "path": "\/admin\/index",
      "name": "\u9996\u9875",
      "component": "Common.Index",
      "display": true,
      "icon": "icon-home"
    }, {
      "path": "\/admin\/updatePassword",
      "name": "\u4fee\u6539\u5bc6\u7801",
      "component": "Common.UpdatePassword",
      "display": false
    }, {
      "path": "\/admin\/commodity",
      "name": "\u5546\u54c1\u7ba1\u7406",
      "component": "Content",
      "display": true,
      "icon": "icon-class",
      "children": [{
        "path": "\/admin\/commodity\/publicWarehouse",
        "name": "\u516c\u5171\u5e93\u7ba1\u7406",
        "component": "Commodity.PublicWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }, {
        "path": "\/admin\/commodity\/businessesWarehouse",
        "name": "\u5546\u5bb6\u5e93\u7ba1\u7406",
        "component": "Commodity.BusinessesWarehouse",
        "display": true,
        "meta": {"handleAuth": {"add": true, "edit": false, "del": true}}
      }]
    }]

Les autorisations du menu sont à peu près comme ceci. Quant aux autorisations d'opération, l'idée est la suivante : Écrivez un plug-in de vue d'authentification, puis placez toutes les opérations indépendamment dans les méthodes, puis toutes les opérations appellent la fonction d'authentification dans ; @click, $auth( 'add', arg1, arg2, ...argN); Déterminez dans $auth si this.$route.meta a l'autorisation d'effectuer cette opération. Si tel est le cas, appelez this[authName].apply(null. , arg);

Recommandations associées :

Analyse pratique des principes de mise en œuvre du contrôle des autorisations des membres PHP_Tutoriel PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!