So legen Sie Benutzerberechtigungen in VueJS fest

In diesem Artikel erfahren Sie hauptsächlich den detaillierten Prozess und die Methode zum Verwalten von Benutzerberechtigungen in VueJS-Anwendungen sowie die entsprechende Codeanzeige.

In Frontend-Anwendungen, die eine Authentifizierung erfordern, möchten wir häufig Benutzerrollen verwenden, um zu bestimmen, welche Inhalte sichtbar sind. Gäste können beispielsweise Artikel lesen, aber nur registrierte Benutzer oder Administratoren können den Bearbeiten-Button sehen.

Die Verwaltung von Berechtigungen im Frontend kann etwas umständlich sein. Möglicherweise haben Sie schon einmal Code wie diesen geschrieben:

if (user.type === ADMIN || user.auth && post.owner === user.id ) {
 ...
}

Alternativ kann eine einfache und leichte Bibliothek – CASL – die Verwaltung von Benutzerberechtigungen sehr einfach machen. Solange Sie Berechtigungen mithilfe von CASL definiert und den aktuellen Benutzer festgelegt haben, können Sie den obigen Code wie folgt ändern:

if (abilities.can('update', 'Post')) {
 ...
}

In diesem Artikel werde ich zeigen, wie Sie Vue.js und CASL zum Verwalten von Berechtigungen verwenden.

CASL-Crashkurs

Mit CASL können Sie eine Reihe von Regeln definieren, um einzuschränken, welche Ressourcen für Benutzer sichtbar sind.

Zum Beispiel können CASL-Regeln angeben, welche CRUD-Vorgänge (Erstellen, Lesen, Aktualisieren und Löschen) Benutzer für bestimmte Ressourcen und Instanzen (Beiträge, Artikel, Kommentare usw.) ausführen können.

Angenommen, wir haben eine Website für Kleinanzeigen. Die offensichtlichste Regel ist:

Besucher können alle Beiträge durchsuchen

Administratoren können alle Beiträge durchsuchen und aktualisieren oder löschen

Mit CASL verwenden wir AbilityBuilder, um die Regeln zu definieren. Rufen Sie can auf, um eine neue Regel zu definieren. Zum Beispiel:

onst { AbilityBuilder } = require('casl');

export function(type) {
 AbilityBuilder.define(can => {
  switch(type) {
   case 'guest':
    can('read', 'Post');
    break;
   case 'admin':
    can('read', 'Post');
    can(['update', 'delete'], 'Post');
    break;
   // Add more roles here
  }
 }
};

Jetzt können Sie die definierten Regeln verwenden, um Anwendungsberechtigungen zu überprüfen.

import defineAbilitiesFor from './abilities';

let currentUser = {
 id: 999,
 name: "Julie"
 type: "registered",
};

let abilities = defineAbilitiesFor(currentUser.type);

Vue.component({
 template: `<p><p>
       <p>Please log in</p>
      `,
 props: [ &#39;post&#39; ],
 computed: {
  showPost() {
   return abilities.can(&#39;read&#39;, &#39;Post&#39;);
  }
 }
});

Demokurs

Zur Demonstration habe ich eine Server/Client-Anwendung zum Anzeigen von Kleinanzeigenbeiträgen erstellt. Die Regeln dieser Anwendung lauten: Benutzer können Beiträge lesen oder posten, aber nur ihre eigenen Beiträge aktualisieren oder löschen.

Ich verwende Vue.js und CASL, um diese Regeln einfach auszuführen und zu erweitern, auch wenn später neue Vorgänge oder Instanzen hinzugefügt werden, ist dies praktisch.

Jetzt werde ich Sie Schritt für Schritt durch die Erstellung dieser Anwendung führen. Wenn Sie einen Blick darauf werfen möchten, schauen Sie sich bitte dieses Github-Repo an.

Benutzerberechtigungen definieren

Wir definieren Benutzerberechtigungen in resources/ability.js. Ein Vorteil von CASL besteht darin, dass es umgebungsunabhängig ist, was bedeutet, dass es sowohl im Node als auch im Browser ausgeführt werden kann.

Wir schreiben die Berechtigungsdefinition in ein CommonJS-Modul, um die Node-Kompatibilität sicherzustellen (Webpack kann die Verwendung dieses Moduls auf dem Client ermöglichen).

resources/ability.js

const casl = require('casl');

module.exports = function defineAbilitiesFor(user) {
 return casl.AbilityBuilder.define(
  { subjectName: item => item.type },
  can => {
   can(['read', 'create'], 'Post');
   can(['update', 'delete'], 'Post', { user: user });
  }
 );
};

Lassen Sie uns diesen Code analysieren.

Als zweiten Parameter der Methode define definieren wir Berechtigungsregeln durch den Aufruf von can. Der erste Parameter dieser Methode ist der CRUD-Vorgang, den Sie zulassen möchten, und der zweite ist die Ressource oder Instanz, in diesem Fall Post.

Beachten Sie, dass wir im zweiten Can-Aufruf ein Objekt als dritten Parameter übergeben haben. Dieses Objekt wird verwendet, um zu testen, ob das Benutzerattribut mit dem von uns bereitgestellten Benutzerobjekt übereinstimmt. Wenn wir dies nicht tun, kann nicht nur der Ersteller den Beitrag löschen, sondern jeder kann ihn nach Belieben löschen.

resources/ability.js

...
casl.AbilityBuilder.define(
 ...
 can => {
  can(['read', 'create'], 'Post');
  can(['update', 'delete'], 'Post', { user: user });
 }
);

Wenn CASL eine Instanz überprüft, um Berechtigungen zuzuweisen, muss es den Typ der Instanz kennen. Eine Lösung besteht darin, das Objekt mit der subjectName-Methode als ersten Parameter der define-Methode zu verwenden. Die subjectName-Methode gibt den Typ der Instanz zurück.

Dies erreichen wir, indem wir den Typ in der Instanz zurückgeben. Wir müssen sicherstellen, dass diese Eigenschaft vorhanden ist, wenn wir das Post-Objekt definieren.

resources/ability.js

...
casl.AbilityBuilder.define(
 { subjectName: item => item.type },
 ...
);

Schließlich kapseln wir unsere Berechtigungsdefinition in eine Funktion, damit wir direkt ein Benutzerobjekt übergeben können, wenn wir Berechtigungen testen müssen. In der folgenden Funktion wird es einfacher zu verstehen sein.

resources/ability.js

const casl = require('casl');

module.exports = function defineAbilitiesFor(user) {
 ...
};

Zugriffsberechtigungsregeln in Vue

Jetzt wollen wir prüfen, welche CRUD-Berechtigungen der Benutzer in einem Objekt in der Frontend-Anwendung hat. Wir müssen auf die CASL-Regeln in der Vue-Komponente zugreifen. Dies ist die Methode:

Vue und das Fähigkeiten-Plugin einführen. Dieses Plug-in fügt CASL zum Vue-Prototyp hinzu, sodass wir es innerhalb der Komponente aufrufen können.

Führen Sie unsere Regeln in die Vue-Anwendung ein (Beispiel: resources/abilities.js).

Definieren Sie den aktuellen Benutzer. Im tatsächlichen Kampf erhalten wir Benutzerdaten über den Server. In diesem Beispiel codieren wir sie einfach fest in das Projekt.

Denken Sie daran, dass das Fähigkeitenmodul eine Funktion exportiert, wir nennen sie defineAbilitiesFor. Wir werden das Benutzerobjekt an diese Funktion übergeben. Jetzt können wir, wann immer wir können, ein Objekt untersuchen, um herauszufinden, welche Berechtigungen der aktuelle Benutzer hat.

Fügen Sie das Fähigkeiten-Plug-in hinzu, damit wir es in der Komponente wie folgt testen können: this.$can(...).

src/main.js

import Vue from 'vue';
import abilitiesPlugin from './ability-plugin';

const defineAbilitiesFor = require('../resources/ability');
let user = { id: 1, name: 'George' };
let ability = defineAbilitiesFor(user.id);
Vue.use(abilitiesPlugin, ability);

Beitragsinstanz

Unsere Anwendung verwendet Kleinanzeigenbeiträge. Diese Objekte, die Beiträge darstellen, werden aus der Datenbank abgerufen und vom Server an das Front-End übergeben. Zum Beispiel:

In unserer Post-Instanz sind zwei Attribute erforderlich:

Typattribut. CASL verwendet den subjectName-Rückruf in abilities.js, um zu überprüfen, welche Instanz getestet wird.

user属性。这是发帖者。记住，用户只能更新和删除他们发布的帖子。在 main.js中我们通过defineAbilitiesFor(user.id)已经告诉了CASL当前用户是谁。CASL要做的就是检查用户的ID和user属性是否匹配。

let posts = [
 {
  type: 'Post',
  user: 1,
  content: '1 used cat, good condition'
 },
 {
  type: 'Post',
  user: 2,
  content: 'Second-hand bathroom wallpaper'
 }
];

这两个post对象中，ID为1的George，拥有第一个帖子的更新删除权限，但没有第二个的。

在对象中测试用户权限

帖子通过Post组件在应用中展示。先看一下代码，下面我会讲解：

src/components/Post.vue

<template>
 <p>
  <p>

   <br /><small>posted by </small>
  </p>
  <button @click="del">Delete</button>
 </p>
</template>
<script> import axios from &#39;axios&#39;;

 export default {
  props: [&#39;post&#39;, &#39;username&#39;],
  methods: {
   del() {
    if (this.$can(&#39;delete&#39;, this.post)) {
     ...
    } else {
     this.$emit(&#39;err&#39;, &#39;Only the owner of a post can delete it!&#39;);
    }
   }
  }
 } </script>
<style lang="scss">...</style>

点击Delete按钮，捕获到点击事件，会调用del处理函数。

我们通过this.$can('delete', post)来使用CASL检查当前用户是否具有操作权限。如果有权限，就进一步操作，如果没有，就给出错误提示“只有发布者可以删除！”

服务器端测试

在真实项目里，用户在前端删除后，我们会通过 Ajax发送删除指令到接口，比如：

src/components/Post.vue

if (this.$can('delete', post)) {
 axios.get(`/delete/${post.id}`, ).then(res => {
  ...
 });
}

服务器不应信任客户端的CRUD操作，那我们把CASL测试逻辑放到服务器：

server.js

app.get("/delete/:id", (req, res) => {
 let postId = parseInt(req.params.id);
 let post = posts.find(post => post.id === postId);
 if (ability.can('delete', post)) {
  posts = posts.filter(cur => cur !== post);
  res.json({ success: true });
 } else {
  res.json({ success: false });
 }
});

CASL是同构（isomorphic）的，服务器上的ability对象就可以从abilities.js中引入，这样我们就不必复制任何代码了！

封装

此时，在简单的Vue应用里，我们就有非常好的方式管理用户权限了。

我认为this.$can('delete', post) 比下面这样优雅得多：

if (user.id === post.user && post.type === 'Post') {
 ...
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS中的单例模式实现对数据增删改查

使用Vue仿制今日头条（详细教程）

React开发如何配置eslint

Das obige ist der detaillierte Inhalt vonSo legen Sie Benutzerberechtigungen in VueJS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!