Methode zur Implementierung einer Berechtigungssteuerung auf Tastenebene basierend auf benutzerdefinierten Vue-Anweisungen

In diesem Artikel wird hauptsächlich die Implementierung der Berechtigungssteuerung auf Tastenebene basierend auf benutzerdefinierten Anweisungen von Vue vorgestellt. In diesem Artikel sollten interessierte Freunde gemeinsam lernen

Ideen:

• Anmelden: Nachdem der Benutzer das Konto und das Passwort eingegeben hat, überprüfen Sie beim Server, ob diese korrekt sind Nach Erhalt des Tokens wird ein Token zurückgegeben (ich werde dieses Token in sessionStorage speichern, um sicherzustellen, dass der Benutzeranmeldestatus nach dem Aktualisieren der Seite gespeichert werden kann). Informationen (z. B. Benutzerberechtigungen, Benutzername usw.).
  

• Berechtigungsüberprüfung: Rufen Sie die dem Benutzer entsprechende Rolle über ein Token ab, passen Sie Anweisungen an und rufen Sie btnPermissions im Routing-Meta-Attribut ab (Hinweis: meta.btnPermissions ist ein Array, das speichert Schaltflächenberechtigungen (in der Routing-Tabelle konfiguriert) und ermitteln Sie dann, ob sich die Rolle im btnPermissions-Array befindet. Wenn nicht, löschen Sie das Schaltflächen-DOM.
  

Schaltflächenberechtigungen können auch mit v-if ermittelt werden. Wenn jedoch zu viele Seiten vorhanden sind, muss jede Seite die Benutzerberechtigungsrolle und das Meta im Routing erhalten Tabelle.btnPermissions und dann ein Urteil fällen, was sich etwas umständlich anfühlt. Bei benutzerdefinierten Anweisungen müssen Sie nur die Anweisung zur Berechtigungsschaltfläche hinzufügen.

Kommen wir ohne Umschweife zum Code...

Routing-Konfiguration:

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'] } //页面需要的权限
   }
  ]

Benutzerdefinierte Anweisung:

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}

Dann rein Haupt-.js-Datei-Importdatei

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

Fügen Sie einfach v-has zur Schaltfläche auf der Seite hinzu

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

Fazit:

Berechtigungen erfordern eine Kombination aus Front-End und Back-End, und das sollte das Front-End tun Kontrollieren Sie es so weit wie möglich. Denken Sie daran: Vertrauen Sie immer nicht den Benutzereingaben!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Wie Vue Redux verwendet

Vue+mui implementiert lokales Caching von Bildern

Einführung in die Vue-Routenabfang- und Seitensprungeinstellungen

Das obige ist der detaillierte Inhalt vonMethode zur Implementierung einer Berechtigungssteuerung auf Tastenebene basierend auf benutzerdefinierten Vue-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!