溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在需要身份驗證的前端應用里，我們經常想通過用戶角色來決定哪些內容可見。比如，游客身份可以閱讀文章，但注冊用戶或管理員才能看到編輯按鈕。
在前端中管理權限可能會有點麻煩。你之前可能寫過這樣的代碼：
if (user.type === ADMIN || user.auth && post.owner === user.id ) {
...
}
作為代替方案，一個簡潔輕量的庫——CASL——可以讓管理用戶權限變得非常簡單。只要你用CASL定義了權限，并設置了當前用戶，就可以把上面的代碼改為這樣：
if (abilities.can('update', 'Post')) {
...
}
在這篇文章里，我會展示如何在前端應用里使用Vue.js和CASL來管理權限。
CASL可以讓你定義一系列規則來限制哪些資源對用戶可見。
比如，CASL規則能夠標明用戶可以對給定的資源和實例（帖子、文章、評論等）進行哪些CRUD（Create, Read, Update和Delete）操作。
假設我們有分類廣告網站。最顯而易見的規則就是：
游客可以瀏覽所有帖子
管理員可以瀏覽所有帖子，并且可以更新或刪除
使用CASL，我們用AbilityBuilder來定義規則。調用can來定義一條新規則。例如：
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
}
}
};
現在，就可以用定義的規則來檢查應用權限了。
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');
}
}
});
作為演示，我做了一個用來展示分類廣告帖子的服務器/客戶端應用。這個應用的規則是：用戶能夠閱讀帖子或發帖，但是只能更新或刪除自己的帖子。
我用Vue.js和CASL來方便地運行和擴展這些規則，即使以后添加新的操作或實例也將很方便。
現在我就帶你一步步搭建這個應用。如果你想一睹為快，請戳這個Github repo。
我們在 resources/ability.js中定義用戶權限。CASL的一個優點是與環境無關，也就是說它既能在Node中運行，也能在瀏覽器中運行。
我們會把權限定義寫到一個CommonJS模塊里來保證Node的兼容性（Webpack能讓這個模塊用在客戶端）。
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 });
}
);
};
下面我們來剖析這段代碼。
define方法的第二個參數，我們通過調用can來定義了權限規則。這個方法的第一個參數是你要允許的CRUD操作，第二個是資源或實例，在這個例子中是Post。
注意第二個can的調用，我們傳了一個對象作為第三個參數。這個對象是用來測試user屬性是否匹配我們提供的user對象。如果我們不這么做，那不光創建者可以刪帖，誰都可以隨便刪了。
resources/ability.js
...
casl.AbilityBuilder.define(
...
can => {
can(['read', 'create'], 'Post');
can(['update', 'delete'], 'Post', { user: user });
}
);
CASL檢查實例來分配權限時，需要知道實例的type。一種解決方式是把具有subjectName方法的對象，作為define方法的第一個參數，subjectName方法會返回實例的類型。
我們通過在實例中返回type來達成目的。我們需要保證，在定義Post對象時，這個屬性是存在的。
resources/ability.js
...
casl.AbilityBuilder.define(
{ subjectName: item => item.type },
...
);
最后，我們把我們的權限定義封裝到一個函數里，這樣我們就可以在需要測試權限的時候直接傳進一個user對象。在下面的函數中會更易理解。
resources/ability.js
const casl = require('casl');
module.exports = function defineAbilitiesFor(user) {
...
};
現在我們想在前端應用中檢查一個對象中，用戶具有哪些CRUD權限。我們需要在Vue組件中訪問CASL規則。這是方法：
引入Vue和 abilities plugin。這個插件會把CASL加到Vue的原型上，這樣我們就能在組件內調用了。
在Vue 應用內引入我們的規則（例： resources/abilities.js）。
定義當前用戶。實戰中，我們是通過服務器來獲取用戶數據的，在這個例子中，我們簡單地硬編碼到到項目里。
牢記，abilities模塊export一個函數，我們把它稱為defineAbilitiesFor。我們會向這個函數傳入用戶對象。現在，無論何時，我們可以通過檢測一個對象來得出當前用戶擁有何種權限。
添加abilities插件，這樣我們就可以在組件中像這樣來進行測試了：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實例中有兩個屬性是必須的：
type屬性。CASL會使用 abilities.js中的subjectName回調來檢查正在測試的是哪種實例。
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>
<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>
點擊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') {
...
}
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
