Implementieren Sie die Benutzerberechtigungskontrolle in Vue2.0

In diesem Artikel werden hauptsächlich Beispiele für Vue2.0-Lösungen zur Benutzerberechtigungskontrolle vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Vue-Access-Control ist eine Front-End-Benutzerberechtigungskontrolllösung, die auf Vue/Vue-Router/axios basiert. Sie steuert Routing, Ansicht und Anfrage auf drei Ebenen : Mit Control können Entwickler Benutzerberechtigungskontrollen in beliebiger Granularität implementieren.

Installation

Versionsanforderungen

1. Vue 2.0x

2. Vue-Router 3.x

Get

git: Git-Klon https://github.com/tower1229/Vue-Access-Control.git

npm: npm i vue-access-control

Ausführen

//开发
npm run dev

//构建
npm build

Übersicht

Gesamtidee

Initialisieren Sie zu Beginn der Sitzung zunächst eine Vue-Instanz mit nur Login-Routing und leiten Sie das Routing an die Anmeldeseite im erstellten Hook der Root-Komponente weiter Bei Erfolg ruft das Front-End das Benutzer-Token ab. Richten Sie die Axios-Instanz so ein, dass {"Authorization":token} einheitlich zu den Anforderungsheadern hinzugefügt wird, um die Benutzerauthentifizierung zu implementieren, und erhalten Sie dann die Berechtigungsdaten des aktuellen Benutzers, zu denen hauptsächlich Routing-Berechtigungen gehören Fügen Sie dann dynamisch Routen hinzu, generieren Sie Menüs und implementieren Sie Berechtigungsanweisungen und globale Berechtigungen. Überprüfen Sie die Methode und fügen Sie der Axios-Instanz einen Anforderungs-Interceptor hinzu. Nach dem dynamischen Laden der Route wird die Routing-Komponente geladen und gerendert und anschließend die Front-End-Schnittstelle angezeigt.

Um das Problem des Zurücksetzens der Browser-Aktualisierungsroute zu lösen, müssen Sie das Token nach Erhalt in sessionStorage speichern. Der erstellte Hook der Root-Komponente ist dafür verantwortlich, zu überprüfen, ob das Token bereits lokal vorhanden ist Sie können das Token also direkt verwenden, ohne sich anzumelden. Berechtigungen einholen und initialisieren. Wenn das Token gültig ist und die aktuelle Route Zugriff hat, wird die Routing-Komponente geladen und korrekt angezeigt, wenn die aktuelle Route keinen Zugriff hat Springen Sie gemäß den Routing-Einstellungen zu 404. Wenn das Token ungültig ist, sollte das Backend einen 4xx-Statuscode zurückgeben und das Frontend Unified einen Fehler-Interceptor zur Axios-Instanz hinzufügen, einen Exit-Vorgang ausführen, wenn ein 4xx-Statuscode auftritt, und den löschen sessionStorage-Daten und springen Sie zur Anmeldeseite, sodass sich der Benutzer erneut anmelden kann.

Prinzip der minimalen Abhängigkeit

Vue-Access-Control ist als Einzeldomänenlösung ohne weitere Abhängigkeiten außer Vue/Vue-Router/axios positioniert kann problemlos auf jedes Vue-Projekt mit Berechtigungskontrollanforderungen angewendet werden. Das Projekt wird auf der Grundlage von Webpack-Vorlagen entwickelt und erstellt. Die meisten neuen Projekte können direkt auf der Grundlage des ausgecheckten Codes entwickelt werden. Es ist zu beachten, dass die im Projekt eingeführten zusätzlichen Elemente UI und CryptoJS nur zur Entwicklung der Demonstrationsschnittstelle verwendet werden. Sie sind nicht erforderlich und haben nichts mit der Berechtigungssteuerung zu tun. Sie können sie in der Projektanwendung selbst auswählen.

Verzeichnisstruktur

src/
 |-- api/         //接口文件
 |   |-- index.js       //输出通用axios实例
 |   |-- account.js      //按业务模块组织的接口文件，所有接口都引用./index提供的axios实例
 |-- assets/
 |-- components/
 |-- router/
 |   |-- fullpath.js     //完整路由数据，用于匹配用户的路由权限得到实际路由
 |   `-- index.js      //输出基础路由实例
 |-- views/
 |-- App.vue
 ·-- main.js

Datenformatkonvention

Routing-Berechtigungsdaten müssen ein Objektarray im folgenden Format sein, ID und parent_id Die gleichen zwei Routen haben eine übergeordnete-untergeordnete Beziehung. Wenn Sie Routing-Daten in einem benutzerdefinierten Format verwenden möchten, müssen Sie die entsprechende Implementierung der Routing-Steuerung ändern. Weitere Informationen finden Sie unter Routing-Steuerung

[
  {
   "id": "1",
   "name": "菜单1",
   "parent_id": null,
   "route": "route1"
  },
  {
   "id": "2",
   "name": "菜单1-1",
   "parent_id": "1",
   "route": "route2"
  }
 ]

Die Ressourcenberechtigungsdaten müssen ein Objektarray im folgenden Format sein. Jedes Objekt stellt eine RESTful-Anfrage dar und unterstützt URLs mit Parametern. Spezifische Formatanweisungen finden Sie unter Anforderungssteuerung

Routing-Steuerung

Routing Control umfasst die dynamische Registrierung von Routen und die dynamische Generierung eines Menüs in zwei Teilen.

Dynamische Registrierungsroute

Die ursprünglich instanziierte Route umfasst nur Login und 404-Pfade. Wir gehen davon aus, dass die vollständige Route so aussieht:

 [
  {
   "id": "2c9180895e172348015e1740805d000d",
   "name": "账号-获取",
   "url": "/accounts",
   "method": "GET"
  },
  {
   "id": "2c9180895e172348015e1740c30f000e",
   "name": "账号-删除",
   "url": "/account/**",
   "method": "DELETE"
  }
]

Dann Sie müssen die Homepage und ihre Unterrouten abrufen. Die Idee besteht darin, die vollständigen Routing-Daten des gesamten Projekts vorab lokal zu speichern und dann die vollständigen Routen entsprechend den Benutzerberechtigungen zu filtern.

Die Implementierungsidee des Filterns besteht darin, zunächst die vom Backend zurückgegebenen Routing-Daten in die folgende Hash-Struktur zu verarbeiten:

[{
 path: '/login',
 name: 'login',
 component: (resolve) => require(['../views/login.vue'], resolve)
}, {
 path: '/404',
 name: '404',
 component: (resolve) => require(['../views/common/404.vue'], resolve)
}, {
 path: '/',
 name: '首页',
 component: (resolve) => require(['../views/index.vue'], resolve),
 children: [{
  path: '/route1',
  name: '栏目1',
  meta: {
   icon: 'icon-channel1'
  },
  component: (resolve) => require(['../views/view1.vue'], resolve)
 }, {
  path: '/route2',
  name: '栏目2',
  meta: {
   icon: 'ico-channel2'
  },
  component: (resolve) => require(['../views/view2.vue'], resolve),
  children: [{
   path: 'child2-1',
   name: '子栏目2-1',
   meta: {
    
   },
   component: (resolve) => require(['../views/route2-1.vue'], resolve)
  }]
 }]
}, {
 path: '*',
 redirect: '/404'
}]

Dann die lokale vollständige Route durchlaufen und den Pfad in die integrieren Obige Struktur im Schlüsselformat, Sie können hashMenus[route] verwenden, um zu bestimmen, ob die Route übereinstimmt. Informationen zur spezifischen Implementierung finden Sie in der Methode getRoutes() in der Datei App.vue.

Wenn die vom Backend zurückgegebenen Routing-Berechtigungsdaten von der Vereinbarung abweichen, müssen Sie die Filterlogik selbst implementieren. Solange Sie die tatsächlich verfügbaren Routing-Daten erhalten, können Sie schließlich addRoutes() verwenden. Um sie dynamisch zur Routing-Instanz hinzuzufügen, beachten Sie bitte, dass der Fuzzy-Abgleich der 404-Seite am Ende platziert werden muss.

Dynamisches Menü

Routing-Daten können direkt zum Generieren eines Navigationsmenüs verwendet werden, Routing-Daten werden jedoch in der Stammkomponente abgerufen und das Navigationsmenü ist im Index vorhanden. Vue-Komponente, natürlich müssen wir die Menüdaten auf irgendeine Weise teilen, es gibt viele Methoden, im Allgemeinen fällt mir als Erstes Vuex ein, aber die Menüdaten ändern sich während der gesamten Benutzersitzung nicht, dies ist nicht die beste Verwendung Szenario von Vuex, und Um unnötige Abhängigkeiten zu minimieren, wird hier die einfachste und direkteste Methode verwendet, indem die Menüdaten an die Stammkomponente data.menuData gehängt und mit this.$parent.menuData auf der Homepage abgerufen werden.

Darüber hinaus muss das Navigationsmenü wahrscheinlich Spaltensymbole hinzufügen. Dies kann durch Hinzufügen von Metadaten zur Route erreicht werden, wenn beispielsweise die Symbolklasse oder der Unicode in der Routenmeta gespeichert ist , kann auf die Metadaten in der Vorlage zugegriffen werden, die zum Generieren von Symbolbeschriftungen verwendet werden.

在多角色系统中可能遇到的一个问题是，不同角色有一个名字相同但功能不同的路由，比如说系统管理员和企业管理员都有”账号管理”这个路由，但他们的操作权限和目标不同，实际上是两个完全不同的界面，而Vue不允许多个路由同名，因此路由的name必须做区分，但把区分后的name显示在前端菜单上会很不美观，为了让不同角色可以享有同一个菜单名称，我们只要将这两个路由的meta.name都设置成”账号管理”，在模板循环时优先使用meta.name就可以了。

菜单的具体实现可以参考views/index.vue。

视图控制

视图控制的目标是根据当前用户权限决定界面元素显示与否，典型场景是对各种操作按钮的显示控制。实现视图控制的本质是实现一个权限验证方法，输入请求权限，输出是否获准。然后配合v-if或jsx或自定义指令就能灵活实现各种视图控制。

全局验证方法

验证方法的的实现本身很简单，无非是根据后端给出的资源权限做判断，重点在于优化方法的输入输出，提升易用性，经过实践总结最终使用的方案是，将权限跟请求同时维护，验证方法接收请求对象数组为参数，返回是否具有权限的布尔值。

请求对象格式：

//获取账户列表
const request = {
 p: ['get,/accounts'],
 r: params => {
  return instance.get(`/accounts`, {params})
 }
}

权限验证方法$_has()的调用格式：

v-if="$_has([request])"

权限验证方法的具体实现见App.vue中Vue.prototype.$_has方法。

将权限验证方法全局混入，就可以在项目中很容易的配合v-if实现元素显示控制，这种方式的优点在于灵活，除了可以校验权限外，还可以在判断表达式中加入运行时状态做更多样性的判断，而且可以充分利用v-if响应数据变化的特点，实现动态视图控制。

具体实现细节参考基于Vue实现后台系统权限控制中的相关章节。

自定义指令

v-if的响应特性是把双刃剑，因为判断表达式在运行过程中会频繁触发，但实际上在一个用户会话周期内其权限并不会发生变化，因此如果只需要校验权限的话，用v-if会产生大量不必要的运算，这种情况只需在视图载入时校验一次即可，可以通过自定义指令实现：

//权限指令
Vue.directive('has', {
 bind: function(el, binding) {
  if (!Vue.prototype.$_has(binding.value)) {
   el.parentNode.removeChild(el);
  }
 }
});

自定义指令内部仍然是调用全局验证方法，但优点在于只会在元素初始化时执行一次，多数情况下都应该使用自定义指令实现视图控制。

请求控制

请求控制是利用axios拦截器实现的，目的是将越权请求在前端拦截掉，原理是在请求拦截器中判断本次请求是否符合用户权限，以决定是否拦截。

普通请求的判断很容易，遍历后端返回的的资源权限格式，直接判断request.method和request.url是否吻合就可以了，对于带参数的url需要使用通配符，这里需要根据项目需求前后端协商一致，约定好通配符格式后，拦截器中要先将带参数的url处理成约定格式，再判断权限，方案中已经实现了以下两种通配符格式：

1. 格式：/resources/:id
   示例：/resources/1
   url: /resources/**
   解释：一个名词后跟一个参数，参数通常表示名词的id  

2. 格式：/store/:id/member
   示例：/store/1/member
   url：/store/*/member

 解释：两个名词之间夹带一个参数，参数通常表示第一个名词的id
对于第一种格式需要注意的是，如果你要发起一个url为"/aaa/bbb"的请求，默认会被处理成"/aaa/**"进行权限校验，如果这里的”bbb”并不是参数而是url的一部分，那么你需要将url改成"/aaa/bbb/"，在最后加一个”/“表示该url不需要转化格式。

拦截器的具体实现见App.vue中的setInterceptor()方法。

如果你的项目还需要其他的通配符格式，只需要在拦截器中实现对应的检测和转化方法就可以了。

演示及说明

演示说明：

DEMO项目中演示了动态菜单、动态路由、按钮权限、请求拦截。

演示项目后端由rap2生成mock数据，登录请求通常应该是POST方式，但因为rap2的编程模式无法获取到非GET的请求参数，因此只能用GET方式登录，实际项目中不建议仿效；

另外登录后获取权限的接口本来不需要携带额外参数，后端可以根据请求头携带的token信息实现用户鉴权，但因为rap2的编程模式获取不到headers数据，因此只能增加一个”Authorization”参数用于生成模拟数据。

测试账号:

1. Benutzername: root
Passwort: beliebig
2. Benutzername: Kunde
Passwort: beliebig

Das Obige habe ich für alle zusammengestellt alle in der Zukunft.

Verwandte Artikel:

So verwenden Sie Radio in AngularJS, um eines von zwei Elementen auszuwählen (ausführliche Anleitung)

in vue Umfassende Interpretation von cli (ausführliches Tutorial)

So ändern Sie den Radiostatus dynamisch über js (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Benutzerberechtigungskontrolle in Vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!