詳解VueJS應(yīng)用中管理用戶(hù)權(quán)限

在需要身份驗(yàn)證的前端應(yīng)用里，我們經(jīng)常想通過(guò)用戶(hù)角色來(lái)決定哪些內(nèi)容可見(jiàn)。比如，游客身份可以閱讀文章，但注冊(cè)用戶(hù)或管理員才能看到編輯按鈕。

在前端中管理權(quán)限可能會(huì)有點(diǎn)麻煩。你之前可能寫(xiě)過(guò)這樣的代碼：

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

作為代替方案，一個(gè)簡(jiǎn)潔輕量的庫(kù)——CASL——可以讓管理用戶(hù)權(quán)限變得非常簡(jiǎn)單。只要你用CASL定義了權(quán)限，并設(shè)置了當(dāng)前用戶(hù)，就可以把上面的代碼改為這樣：

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

在這篇文章里，我會(huì)展示如何在前端應(yīng)用里使用Vue.js和CASL來(lái)管理權(quán)限。

CASL 速成課程

CASL可以讓你定義一系列規(guī)則來(lái)限制哪些資源對(duì)用戶(hù)可見(jiàn)。

比如，CASL規(guī)則能夠標(biāo)明用戶(hù)可以對(duì)給定的資源和實(shí)例（帖子、文章、評(píng)論等）進(jìn)行哪些CRUD（Create, Read, Update和Delete）操作。

假設(shè)我們有分類(lèi)廣告網(wǎng)站。最顯而易見(jiàn)的規(guī)則就是：

游客可以瀏覽所有帖子

管理員可以瀏覽所有帖子，并且可以更新或刪除

使用CASL，我們用AbilityBuilder來(lái)定義規(guī)則。調(diào)用can來(lái)定義一條新規(guī)則。例如：

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
  }
 }
};

現(xiàn)在，就可以用定義的規(guī)則來(lái)檢查應(yīng)用權(quán)限了。

import defineAbilitiesFor from './abilities';

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

let abilities = defineAbilitiesFor(currentUser.type);

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

Demo 課程

作為演示，我做了一個(gè)用來(lái)展示分類(lèi)廣告帖子的服務(wù)器/客戶(hù)端應(yīng)用。這個(gè)應(yīng)用的規(guī)則是：用戶(hù)能夠閱讀帖子或發(fā)帖，但是只能更新或刪除自己的帖子。

我用Vue.js和CASL來(lái)方便地運(yùn)行和擴(kuò)展這些規(guī)則，即使以后添加新的操作或?qū)嵗矊⒑芊奖恪?/p>

現(xiàn)在我就帶你一步步搭建這個(gè)應(yīng)用。如果你想一睹為快，請(qǐng)戳這個(gè)Github repo。

定義用戶(hù)權(quán)限

我們?cè)?resources/ability.js中定義用戶(hù)權(quán)限。CASL的一個(gè)優(yōu)點(diǎn)是與環(huán)境無(wú)關(guān)，也就是說(shuō)它既能在Node中運(yùn)行，也能在瀏覽器中運(yùn)行。

我們會(huì)把權(quán)限定義寫(xiě)到一個(gè)CommonJS模塊里來(lái)保證Node的兼容性（Webpack能讓這個(gè)模塊用在客戶(hù)端）。

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 });
  }
 );
};

下面我們來(lái)剖析這段代碼。

define方法的第二個(gè)參數(shù)，我們通過(guò)調(diào)用can來(lái)定義了權(quán)限規(guī)則。這個(gè)方法的第一個(gè)參數(shù)是你要允許的CRUD操作，第二個(gè)是資源或?qū)嵗谶@個(gè)例子中是Post。

注意第二個(gè)can的調(diào)用，我們傳了一個(gè)對(duì)象作為第三個(gè)參數(shù)。這個(gè)對(duì)象是用來(lái)測(cè)試user屬性是否匹配我們提供的user對(duì)象。如果我們不這么做，那不光創(chuàng)建者可以刪帖，誰(shuí)都可以隨便刪了。

resources/ability.js

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

CASL檢查實(shí)例來(lái)分配權(quán)限時(shí)，需要知道實(shí)例的type。一種解決方式是把具有subjectName方法的對(duì)象，作為define方法的第一個(gè)參數(shù)，subjectName方法會(huì)返回實(shí)例的類(lèi)型。

我們通過(guò)在實(shí)例中返回type來(lái)達(dá)成目的。我們需要保證，在定義Post對(duì)象時(shí)，這個(gè)屬性是存在的。

resources/ability.js

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

最后，我們把我們的權(quán)限定義封裝到一個(gè)函數(shù)里，這樣我們就可以在需要測(cè)試權(quán)限的時(shí)候直接傳進(jìn)一個(gè)user對(duì)象。在下面的函數(shù)中會(huì)更易理解。

resources/ability.js

const casl = require('casl');

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

Vue 中的訪問(wèn)權(quán)限規(guī)則

現(xiàn)在我們想在前端應(yīng)用中檢查一個(gè)對(duì)象中，用戶(hù)具有哪些CRUD權(quán)限。我們需要在Vue組件中訪問(wèn)CASL規(guī)則。這是方法：

引入Vue和 abilities plugin。這個(gè)插件會(huì)把CASL加到Vue的原型上，這樣我們就能在組件內(nèi)調(diào)用了。

在Vue 應(yīng)用內(nèi)引入我們的規(guī)則（例： resources/abilities.js）。

定義當(dāng)前用戶(hù)。實(shí)戰(zhàn)中，我們是通過(guò)服務(wù)器來(lái)獲取用戶(hù)數(shù)據(jù)的，在這個(gè)例子中，我們簡(jiǎn)單地硬編碼到到項(xiàng)目里。

牢記，abilities模塊export一個(gè)函數(shù)，我們把它稱(chēng)為defineAbilitiesFor。我們會(huì)向這個(gè)函數(shù)傳入用戶(hù)對(duì)象?，F(xiàn)在，無(wú)論何時(shí)，我們可以通過(guò)檢測(cè)一個(gè)對(duì)象來(lái)得出當(dāng)前用戶(hù)擁有何種權(quán)限。

添加abilities插件，這樣我們就可以在組件中像這樣來(lái)進(jìn)行測(cè)試了：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);

Post 實(shí)例

我們的應(yīng)用會(huì)使用分類(lèi)廣告的帖子。這些表述帖子的對(duì)象會(huì)從數(shù)據(jù)庫(kù)中檢索，然后被服務(wù)器傳給前端。比如：

我們的Post實(shí)例中有兩個(gè)屬性是必須的：

type屬性。CASL會(huì)使用 abilities.js中的subjectName回調(diào)來(lái)檢查正在測(cè)試的是哪種實(shí)例。

user屬性。這是發(fā)帖者。記住，用戶(hù)只能更新和刪除他們發(fā)布的帖子。在 main.js中我們通過(guò)defineAbilitiesFor(user.id)已經(jīng)告訴了CASL當(dāng)前用戶(hù)是誰(shuí)。CASL要做的就是檢查用戶(hù)的ID和user屬性是否匹配。

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

這兩個(gè)post對(duì)象中，ID為1的George，擁有第一個(gè)帖子的更新刪除權(quán)限，但沒(méi)有第二個(gè)的。

在對(duì)象中測(cè)試用戶(hù)權(quán)限

帖子通過(guò)Post組件在應(yīng)用中展示。先看一下代碼，下面我會(huì)講解：

src/components/Post.vue

<template>
 <div>
  <div>

   <br /><small>posted by </small>
  </div>
  <button @click="del">Delete</button>
 </div>
</template>
<script> import axios from 'axios';

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

點(diǎn)擊Delete按鈕，捕獲到點(diǎn)擊事件，會(huì)調(diào)用del處理函數(shù)。

我們通過(guò)this.$can('delete', post)來(lái)使用CASL檢查當(dāng)前用戶(hù)是否具有操作權(quán)限。如果有權(quán)限，就進(jìn)一步操作，如果沒(méi)有，就給出錯(cuò)誤提示“只有發(fā)布者可以刪除！”

服務(wù)器端測(cè)試

在真實(shí)項(xiàng)目里，用戶(hù)在前端刪除后，我們會(huì)通過(guò) Ajax發(fā)送刪除指令到接口，比如：

src/components/Post.vue

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

服務(wù)器不應(yīng)信任客戶(hù)端的CRUD操作，那我們把CASL測(cè)試邏輯放到服務(wù)器：

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是同構(gòu)（isomorphic）的，服務(wù)器上的ability對(duì)象就可以從abilities.js中引入，這樣我們就不必復(fù)制任何代碼了！

封裝

此時(shí)，在簡(jiǎn)單的Vue應(yīng)用里，我們就有非常好的方式管理用戶(hù)權(quán)限了。

我認(rèn)為this.$can('delete', post) 比下面這樣優(yōu)雅得多：

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