写这样一段代码,vue按钮权限控制,在登录时,前台发起请求,后端返回请求,admin账号有编辑删除下载按钮的权限,其他账号没有
时间: 2024-03-27 07:39:25 浏览: 67
基于vue实现网站前台的权限管理(前后端分离实践)
好的,这里提供一种实现思路,具体的代码可能需要根据你的项目结构和实际需求进行调整。
1. 在后端定义好每个账号的权限,可以使用 RBAC 或 RBAC 的变体来实现。
2. 在登录时,前台发起请求获取到当前用户的权限信息,并将该信息存储到 Vuex 中的 state 中,方便后续的组件调用。
3. 在需要控制权限的组件中,通过计算属性 computed 来返回该用户是否有权限,如下所示:
```html
<template>
<div>
<button v-if="hasPermission('edit')">编辑</button>
<button v-if="hasPermission('delete')">删除</button>
<button v-if="hasPermission('download')">下载</button>
</div>
</template>
<script>
export default {
computed: {
// 判断当前用户是否拥有指定权限
hasPermission() {
const user = this.$store.state.user // 获取当前用户信息
return permission => {
if (user.username === 'admin') {
// 如果是 admin 账号,则拥有所有权限
return true
} else {
// 否则,根据用户的权限信息来判断是否有指定权限
return user.permissions.includes(permission)
}
}
}
}
}
</script>
```
上述代码中,我们使用了一个高阶函数 hasPermission,它接收一个权限名作为参数,返回一个函数,该函数用于判断当前用户是否拥有该权限。如果当前用户是 admin 账号,则返回 true,否则根据用户的权限信息来判断是否有指定权限。在组件中,我们通过 v-if 指令来控制按钮的显示,如果当前用户有指定权限,则显示该按钮,否则不显示。
阅读全文