Vue.js 分权案例：实现用户权限控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 分权案例：实现用户权限控制</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Welcome {{ username }}</h1>
<button v-if="isAdmin" @click="deleteItem">Delete Item</button>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
<button v-if="canEdit(item)" @click="editItem(item)">Edit</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
username: 'John Doe',
isAdmin: false,
items: [
{ id: 1, name: 'Item 1', createdBy: 'John Doe' },
{ id: 2, name: 'Item 2', createdBy: 'Jane Smith' },
{ id: 3, name: 'Item 3', createdBy: 'John Doe' }
]
},
methods: {
canEdit(item) {
return item.createdBy === this.username;
},
editItem(item) {
// 编辑item逻辑
console.log('Edit item:', item);
},
deleteItem() {
// 删除item逻辑
console.log('Delete item');
}
},
mounted() {
// 检查用户权限
// 示例中，如果用户名为'John Doe'，则为管理员
if (this.username === 'John Doe') {
this.isAdmin = true;
}
}
});
</script>
</body>
</html>
<p>在这个案例中，我们展示了一个简单的分权逻辑。用户可以通过<code>username</code>属性进行登录，如果<code>username</code>为'John Doe'，则该用户被视为管理员（<code>isAdmin</code>为<code>true</code>）。管理员可以看到一个"Delete Item"按钮，其他用户则看不到。同时，对于每个item，只有创建者为当前登录用户时，才会显示一个"Edit"按钮。</p>
<p>你可以根据实际需求进行修改和扩展。在实际应用中，通常需要结合后端接口来验证用户权限和处理相应的业务逻辑。</p>
原文地址: https://www.cveoy.top/t/topic/pReA 著作权归作者所有。请勿转载和采集!