Méthode pour implémenter le contrôle des autorisations au niveau des boutons basé sur les instructions personnalisées de Vue

Cet article présente principalement la mise en œuvre du contrôle d'autorisation au niveau des boutons basé sur les instructions personnalisées de vue. Cet article vous le présente en détail. Les amis intéressés devraient étudier ensemble

. Idées :

• Connexion : Une fois que l'utilisateur a renseigné le compte et le mot de passe, vérifiez auprès du serveur s'ils sont corrects. Une fois la vérification réussie, le serveur. renverra un jeton. Après avoir obtenu le jeton (je stockerai ce jeton dans sessionStorage pour m'assurer que l'état de connexion de l'utilisateur peut être mémorisé après avoir actualisé la page). Le frontal extraira une interface user_info basée sur le jeton pour obtenir les détails de l'utilisateur). informations (telles que les autorisations de l'utilisateur, le nom d'utilisateur, etc.).
  

• Vérification des autorisations : obtenez le rôle correspondant à l'utilisateur via un jeton, personnalisez les instructions et obtenez btnPermissions dans le méta-attribut de routage (Remarque : meta.btnPermissions est un tableau qui stocke autorisations du bouton, configurées dans la table de routage), puis déterminez si le rôle se trouve dans le tableau btnPermissions. Sinon, supprimez le bouton DOM.
  

Les autorisations des boutons peuvent également être déterminées à l'aide de v-if, mais s'il y a trop de pages, chaque page doit obtenir le rôle d'autorisation utilisateur et la méta dans le routage table. .btnPermissions, puis faites un jugement, ce qui semble un peu fastidieux. Quant aux instructions personnalisées, il vous suffit d'ajouter l'instruction au bouton d'autorisation.

Sans plus tard, passons au code...

Configuration du routage :

path: '/permission',
  component: Layout,
  name: '权限测试',
  meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
  children: [
   {
    path: 'supper',
    component: _import('system/supper'),
    name: '权限测试页',
    meta: { btnPermissions: ['admin','supper'] } //页面需要的权限
   },
   {
    path: 'normal',
    component: _import('system/normal'),
    name: '权限测试页',
    meta: { btnPermissions: ['admin'] } //页面需要的权限
   }
  ]

Commande personnalisée :

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
 bind: function (el, binding, vnode) {
  // 获取按钮权限
  let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
  if (!Vue.prototype.$_has(btnPermissions)) {
   el.parentNode.removeChild(el);
  }
 }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 if (value.indexOf(btnPermissionsStr) > -1) {
  isExist = true;
 }
 return isExist;
};
export {has}

Ensuite, introduisez le fichier dans le fichier main.js

import has from './public/js/btnPermissions.js';

Ajoutez simplement des v-has au bouton de la page

<el-button @click=&#39;editClick&#39; type="primary" v-has>编辑</el-button>

Conclusion :

Les autorisations nécessitent une combinaison de fonctionnalités frontales et back-end, et le front-end doit être autant que possible Pour contrôler, rappelez-vous : ne faites jamais confiance aux entrées de l'utilisateur !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment Vue utilise Redux

Vue+mui implémente la mise en cache locale des images

Présentation de l'interception d'itinéraire Vue et des paramètres de saut de page

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!