跳到主要内容
版本：Next

前端按钮权限

1. 后端权限​

用户登录后，会返回权限信息，权限信息包含所有可操作按钮权限。

登录成功，获取用户授权接口返回用户信息和权限信息

export type UserResultResult = {
user: {
/** 头像 */
avatar: string;
/** 用户名 */
userName: string;
/** 昵称 */
nickName: string;
};
roles: Array<string>;
permissions: Array<string>;
menus: Array<any>;
};

其中permissions为所有的已授权的权限集。

2.前端权限​

前端把permissions会缓存到useUserStore中。

然后通过如下进行权限集判断

2.1 组件方式判断权限​

按钮、组件权限可用

  • 实现原理、代码

通过 hasPerms (opens new window)函数，进行权限组件的封装，使用 Vue 提供的 Fragment (opens new window)标签进行包裹，这样可让被包裹的组件无多余标签，减少渲染成本。查看具体代码(opens new window)

  • 如何配置

具体参考 views/permission/button/perms.vuehttps://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/index.vue#L25-L46)

<Perms value="btn_add">
  <el-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
</Perms>

2.2函数方式判断权限​

按钮、组件、类方法权限都可用

  • 实现原理、代码

通过 hasPerms (opens new window)函数判断某些按钮、组件、类方法是否有按钮级别的权限

  • 如何配置

具体参考 views/permission/button/perms.vue(opens new window)

<el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
  拥有code：'permission:btn:add' 权限可见
</el-button>
hasPerms("btn_add") ? "显示" : "隐藏";

2.3 指令方式判断权限​

按钮、组件权限可用。指令方式不能动态修改权限

  • 实现原理、代码

通过 hasPerms (opens new window)函数，进行权限指令的封装。查看具体代码(opens new window)

  • 如何配置

具体参考 views/permission/button/perms.vue(opens new window)

<el-button v-perms="'permission:btn:add'" plain type="warning">
  拥有code：'permission:btn:add' 权限可见
</el-button>