用户权限

Vue-Vben-Admin集成了三种权限处理方式：

通过用户角色来过滤菜单(前端方式控制)，菜单和路由分开配置
通过用户角色来过滤菜单(前端方式控制)，菜单由路由配置自动生成
通过后台来动态生成路由表(后台方式控制)

说明

dz-shop采用了第三种方式来生成菜单（后台动态生成路由表）。

点击了解Vue-Vben-Admin的权限处理方式

实现逻辑

dz-shop将权限定义为目录、菜单、功能三种类型
在后台增加权限项。
定义用户角色并绑定权限。
用户登录后通过接口获取用户的RBAC权限列表。
后台根据RBAC权限内容呈现菜单。
服务端根据RBAC权限限制接口访问。

说明

目录：主菜单，无实际功能
菜单：页面，可设置权限标识，与页面组件绑定(@/src/views/)
功能：菜单下各项功能，权限标识与后台接口一致

实现步骤

服务端新增接口控制器，写好功能方法

以文章列表页为例，接口类大致如下：

php

/**
 * 文章接口类
 */
class ArticleController
{
    /**
     * 列表页需要获取的数据，一般是查询过滤条件数据
     */
    public function actionIndexView(): array
    {
        // ...
    }

    /**
     * 列表数据
     */
    public function actionIndex(): array
    {
        // ...
    }

    /**
     * 创建或修改文章需要获取的数据
     */
    public function actionUpdateView(): array
    {
        // ...
    }

    /**
     * 提交新的文章或修改已存在的文章
     */
    public function actionUpdate(): array
    {
        // ...
    }

    /**
     * 修改文章状态或排序
     */
    public function actionUpdateField(int $id): array
    {
        // ...
    }

    /**
     * 删除文章
     */
    public function actionDelete(int $id): array
    {
        // ...
    }
}

后台写好对应的功能页面

可以自行查看 @/src/views/article/article/index.vue

页面代码大致如下：

vue

<template>
  <!--
    UI代码...
  -->
</template>

<script lang="ts" setup name="ArticleContent">
  // 注意这里的name就是动态路由名称，配置的菜单路由必须一致
  // 逻辑代码...
</script>

在后台权限页面将对应页面以及功能配置进RBAC

在后台系统->权限管理配置RBAC

注意

目录用户功能菜单分类，用于菜单收起和展开，没有实际功能

路由地址一般设置为后台对应功能的文件夹名称，如文章相关功能都在 @/src/views/article/ 这个文件夹下，路由地址设置为article

配置主页面

注意

主要说明

主页面一般是列表页面，列表页面可能有创建或编辑子页面，删除或排序等功能

路由地址必须设置为页面代码中script的name值

组件路径设置为页面相对地址

权限标识的使用

在实际开发中，可能会遇到需要从A页面点击某个按钮跳转到B页面的功能，A页面是有权限的，但是B页面不知道用户是否拥有权限，系统需要在B页面有权限时可以直接跳转，在B页面没有权限的时候不显示按钮或者提示用户无权限，这个时候就需要用到权限标识。

权限标识是由开发者预定义的，采用usePermission()方法来判定用户是否具有该权限。

配置子页面

注意

主要说明

子页面一般是在主页面需要打开的新页面，一般是创建或者编辑

路由地址必须设置为页面代码中script的name值

dz-shop的创建和编辑功能一般是共用同一个页面，同一个接口，用于增加开发效率

权限标识的使用

针对于创建或编辑页面，权限标识同时具有接口地址和权限标识功能，必须设置为接口地址

是否显示

对于子页面来说，是在主页面中打开的，并不需要在菜单中显示

当前激活的菜单

由于子页面不在菜单中显示，当打开子页面时，需要将主页面菜单进行选中，一般设置为主页面的路由地址

配置功能权限

注意

功能是指在页面中需要执行的某个接口，接口的权限标识必须设置为接口地址，系统会根据权限标识显示或隐藏对应的功能

配置角色

在新加了RBAC权限之后，需要在角色管理中将权限配置进角色才能生效。

权限继承

假如我们在服务端配置了两个接口分别是 /v1/article/article/delete 和 /v1/article/article/delete-all

在配置时，只需要配置 /v1/article/article/delete 这个接口即可，/v1/article/article/delete-all 会自动拥有该权限

因此，在服务端对于相同权限的多个接口应按此规则来编写代码

用户权限 ​

实现逻辑 ​

实现步骤 ​

服务端新增接口控制器，写好功能方法 ​

后台写好对应的功能页面 ​

在后台权限页面将对应页面以及功能配置进RBAC ​

配置角色 ​

权限继承 ​