Comment charger le module de gestion des autorisations (tutoriel détaillé)

Cet article explique en détail comment charger dynamiquement les composants VUE dans le module de gestion des autorisations. Les amis qui ont des besoins à cet égard peuvent suivre et apprendre.

Dans cet article nous parlerons principalement de connexion et de chargement dynamique des composants.

Enregistrer le statut de connexion

Lorsqu'un utilisateur se connecte avec succès, les informations de connexion de l'utilisateur actuel doivent être enregistrées localement pour une utilisation ultérieure. L'implémentation spécifique est la suivante :

La connexion réussie enregistre les données

Une fois l'opération de connexion exécutée avec succès, les données sont soumises au magasin via l'opération de validation. Le code principal est le suivant :

this.postRequest('/login', {
  username: this.loginForm.username,
  password: this.loginForm.password
}).then(resp=> {
  if (resp && resp.status == 200) {
  var data = resp.data;
  _this.$store.commit('login', data.msg);
  var path = _this.$route.query.redirect;
  _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
  }
});

magasin

Le code principal du magasin est le suivant :

export default new Vuex.Store({
 state: {
  user: {
   name: window.localStorage.getItem('user' || '[]') == null ? '未登录' : JSON.parse(window.localStorage.getItem('user' || '[]')).name,
   userface: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userface
  }
 },
 mutations: {
  login(state, user){
   state.user = user;
   window.localStorage.setItem('user', JSON.stringify(user));
  },
  logout(state){
   window.localStorage.removeItem('user');
  }
 }
});

Afin de Réduisez les problèmes, les données une fois que l'utilisateur s'est connecté avec succès seront enregistrées dans localStorage (pour éviter la perte de données après que l'utilisateur a appuyé sur F5 pour actualiser), elles sont stockées sous la forme d'une chaîne, puis converties en json une fois récupérées. Lorsque l'utilisateur se déconnecte, effacez les données dans localStorage.

Chargement dynamique des composants

Dans le module de gestion des autorisations, c'est le cœur du front-end.

Idée de base

Une fois que l'utilisateur s'est connecté avec succès, avant d'accéder à la page d'accueil, l'utilisateur envoie une demande au serveur pour obtenir les informations actuelles du menu et les informations sur les composants. . Le serveur renverra une chaîne json au format suivant :

[
  {
    "id": 2,
    "path": "/home",
    "component": "Home",
    "name": "员工资料",
    "iconCls": "fa fa-user-circle-o",
    "children": [
      {
        "id": null,
        "path": "/emp/basic",
        "component": "EmpBasic",
        "name": "基本资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/emp/adv",
        "component": "EmpAdv",
        "name": "高级资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  }
]

Après avoir obtenu cette chaîne, le front-end fait deux choses : 1. Convertir json Ajout dynamique à l'itinéraire actuel ; 2. Enregistrez les données dans le magasin, puis chaque page affiche le menu en fonction des données du magasin.

L'idée de base n'est pas difficile. Jetons un coup d'œil aux étapes de mise en œuvre.

Délai de demande de données

Ceci est très important.

Certains amis peuvent demander pourquoi c'est si difficile. Puis-je simplement le demander après m'être connecté avec succès ? Oui, il est possible de demander des ressources de menu après une connexion réussie. Une fois la demande reçue, nous la sauvegarderons dans le magasin pour une prochaine utilisation, mais il y aura un autre problème si l'utilisateur clique avec succès sur un certain sous-enfant. connexion, Page, entrez dans la sous-page, puis appuyez sur F5 pour actualiser. À ce moment-là, il s'agit de GG, car les données du magasin ont disparu après l'actualisation de F5, et nous n'avons demandé les ressources du menu qu'une seule fois lors de la connexion. est réussi. Il y a deux idées pour résoudre ce problème : 1. Ne pas enregistrer les ressources du menu dans le magasin, mais les enregistrer dans localStorage, afin que les données soient toujours là même après l'actualisation F5. 2. Directement dans la méthode montée ; de chaque page, allez Charger les ressources du menu une fois.

Les ressources du menu étant très sensibles, il est préférable de ne pas les enregistrer localement, donc l'option 1 est abandonnée. Cependant, l'option 2 est un peu lourde en charge de travail, j'ai donc pris une mesure pour la simplifier. le garde de navigation en routage.

Garde de navigation d'itinéraire

Mon implémentation spécifique est la suivante. Tout d'abord, créez un tableau de routes dans le magasin, qui est un tableau vide, puis activez le garde d'itinéraire global, comme suit :

router.beforeEach((to, from, next)=> {
  if (to.name == 'Login') {
   next();
   return;
  }
  var name = store.state.user.name;
  if (name == '未登录') {
   if (to.meta.requireAuth || to.name == null) {
    next({path: '/', query: {redirect: to.path}})
   } else {
    next();
   }
  } else {
   initMenu(router, store);
   next();
  }
 }
)

Le code ici est très court, laissez-moi vous donner une explication simple :

1 Si la page à laquelle vous souhaitez accéder est la page de connexion, il n'y a rien à dire à ce sujet. , allez-y directement.

2. S'il ne s'agit pas d'une page de connexion, j'obtiens d'abord l'état de connexion actuel du magasin. Si je ne suis pas connecté, utilisez l'attribut requireAuth de l'attribut méta dans l'itinéraire pour déterminer si la page que je veux. pour y accéder, il faut se connecter. Si tel est le cas, revenez à la page de connexion et transmettez en même temps le chemin de la page à laquelle vous souhaitez accéder en tant que paramètre à la page de connexion, afin de pouvoir accéder à la cible. page après une connexion réussie. Si vous n'avez pas besoin de vous connecter, allez directement (en fait, il n'y a que la page de connexion dans ce projet Aucune connexion requise) ; si vous êtes déjà connecté, initialisez d'abord le menu puis sautez.

Le fonctionnement du menu d'initialisation est le suivant :

export const initMenu = (router, store)=> {
 if (store.state.routes.length > 0) {
  return;
 }
 getRequest("/config/sysmenu").then(resp=> {
  if (resp && resp.status == 200) {
   var fmtRoutes = formatRoutes(resp.data);
   router.addRoutes(fmtRoutes);
   store.commit('initMenu', fmtRoutes);
  }
 })
}
export const formatRoutes = (routes)=> {
 let fmRoutes = [];
 routes.forEach(router=> {
  let {
   path,
   component,
   name,
   meta,
   iconCls,
   children
  } = router;
  if (children && children instanceof Array) {
   children = formatRoutes(children);
  }
  let fmRouter = {
   path: path,
   component(resolve){
    if (component.startsWith("Home")) {
     require(['../components/' + component + '.vue'], resolve)
    } else if (component.startsWith("Emp")) {
     require(['../components/emp/' + component + '.vue'], resolve)
    } else if (component.startsWith("Per")) {
     require(['../components/personnel/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sal")) {
     require(['../components/salary/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sta")) {
     require(['../components/statistics/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sys")) {
     require(['../components/system/' + component + '.vue'], resolve)
    }
   },
   name: name,
   iconCls: iconCls,
   meta: meta,
   children: children
  };
  fmRoutes.push(fmRouter);
 })
 return fmRoutes;
}

Dans le menu d'initialisation, déterminez d'abord si la donnée dans la boutique existe. Si elle existe, cela signifie que ce saut est. un saut normal, et il n'est pas saisi par l'utilisateur en appuyant sur F5 ou en saisissant directement une adresse dans la barre d'adresse. Sinon allez dans le menu de chargement. Après avoir obtenu le menu, utilisez d'abord la méthode formatRoutes pour convertir le json renvoyé par le serveur dans le format requis par le routeur. Ici, nous convertissons principalement le composant, car le composant renvoyé par le serveur est une chaîne, mais ce qui est nécessaire dans le routeur. est un composant, nous chargeons donc simplement les composants requis dynamiquement dans la méthode formatRoutes. Une fois le format des données préparé avec succès, d'une part, les données sont stockées dans le magasin et, d'autre part, la méthode addRoutes dans le routage est utilisée pour les ajouter dynamiquement au routage.

Rendu du menu

Enfin, sur la page d'accueil, récupérez le menu json depuis le magasin et restituez-le dans un menu. Le code correspondant peut être consulté dans Accueil. vue. Pas besoin d'entrer dans les détails.

OK, après cela, différents utilisateurs peuvent voir différents menus après s'être connectés avec succès.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment obtenir la valeur dans select dans vue.js (tutoriel détaillé)

dans Vue2.0 Comment utiliser des filtres en série ?

Comment revenir en haut via la méthode tween dans le projet vue

Comment utiliser vue pour déterminer que le contenu d'entrée est constitué uniquement d'espaces ?

Comment utiliser js pour déterminer que la zone de saisie ne peut pas être un espace ou une valeur nulle ?

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!