权限控制

⭐⭐⭐⭐⭐

页面权限在路由处定义，按钮权限提供了三种控制方式。

如何新增页面权限

在后台的权限维护页面中定义一个新的页面权限，例如需要新增一个名为收藏夹的列表页，则设置页面的权限标识符为list_collect。

控制页面权限

将权限标识符写入路由的meta.permission字段中，这样一个页面级别的权限控制就做好了。没有该权限的用户进入后台则看不到该菜单，通过地址栏强行进入也会跳到404页面。

{
  path: 'list_collect',
  name: 'list_collect',
  component: () => import('views/website/collect/list_collect.vue'),
  meta: {
    title: '收藏夹',
    permission: 'list_collect'
  }
}

如何新增按钮权限

按钮权限必须包含在某个页面中！例如需要在收藏夹列表页新增一个删除按钮，则在后台的权限维护页面中找到对应的页面，然后点击新增子权限并设置权限标识符为list_collect:delete

控制按钮权限

一、指令方式

提供了v-permission和v-permission-all两个指令。

指定某个权限：

<el-button v-permission="'list_collect:delete'">删除</el-button>

只要拥有其中一个权限即可通过：

<el-button v-permission="['list_collect:delete', 'list_collect:addNew']">按钮1</el-button>

需要同时拥有多个权限才能通过：

<el-button v-permission-all="['list_collect:delete', 'list_collect:addNew']">按钮2</el-button>

二、函数方式

提供了$permission和$permissionAll两个函数。

指定某个权限：

proxy.$permission('list_collect:delete')

只要拥有其中一个权限即可通过：

proxy.$permission(['list_collect:delete', 'list_collect:addNew'])

需要同时拥有多个权限才能通过：

proxy.$permissionAll(['list_collect:delete', 'list_collect:addNew'])

三、组件方式

提供了<permission>和<permission-all>两个组件。

指定某个权限：

<permission value="list_collect:delete">
  <el-button>删除</el-button>
</permission>

只要拥有其中一个权限即可通过：

<permission :value="['list_collect:delete', 'list_collect:addNew']">
  <el-button>按钮1</el-button>
</permission>

需要同时拥有多个权限才能通过：

<permission-all :value="['list_collect:delete', 'list_collect:addNew']">
  <el-button>按钮2</el-button>
  <template v-slot:no-auth>您没有权限</template>
</permission-all>

<permission-all>提供一个插槽，可以自定义没有权限时显示内容，也可以不填。

以上演示用到的list_collect、list_collect:delete、list_collect:addNew等权限标识符替换成自己想要的权限标识符。