权限

开启权限校验

在应用配置中设置：

const globalSettings: Settings.all = {
  app: {
    enablePermission: true,
  },
}

权限管理系统设置权限

在权限管理系统中配置资源，资源分为 应用、目录、菜单、按钮、非菜单页，在建立资源的时候配置相应的 资源编号，建立角色的时候配置相关联的资源，然后将角色与用户关联。在用户登录系统的时候会在 store 中保存用户的权限信息，这样在后续的逻辑中就可以根据用户的权限信息进行权限判断。

提示

在后续逻辑中的权限判断，都是基于 资源编号 进行的

路由权限

在路由的 meta 配置项中，其中有一个 auth 参数，这个就是用来配置路由的权限，一个路由可以配置多个权限，当配置多个权限时，只要满足其中任何一个，则视为用户有访问该路由的权限，如下：

meta: {
  auth: ['news.browse', 'news.edit'],
}

框架内部鉴权的逻辑是字符串比对，所以建议对权限有个统一的格式，例如为 xxx.yyy ，其中 xxx 表示模块名， yyy 表示操作类型。那么上面那个例子就表示：

• news.browse 新闻模块的浏览权限
• news.edit 新闻模块的编辑权限

如果在路由中配置了权限，那么在用户访问该路由时，会根据用户的权限信息进行权限判断，如果没有权限，则会跳转到 403 页面。如果用户输入了一个本就没有的菜单就会跳转到 404 页面。

提示

路由权限是比较暴力的，即没有权限则该路由页面无法访问，并且也不会在导航栏中显示。但在实际业务中，遇到更多的情况通常是，可以访问路由页面，但会根据不同权限，使用页面里的不同功能，这时候就需要用到下面三种鉴权方式。

鉴权组件

页面中某个模块，当前用户具备该权限是如何显示，不具备该权限又是如何显示，针对这样的需求，框架提供了 <Auth> 和 <AuthAll> 组件，具体使用如下：

<!-- 单权限验证 -->
<Auth :value="'department.create'">
  <p>你有该权限</p>
  <template #no-auth>
    <p>你没有该权限</p>
  </template>
</Auth>

<!-- 多权限验证，用户只要具备其中任何一个权限，则验证通过 -->
<Auth :value="['department.create', 'department.edit']">
  <p>你有该权限</p>
  <template #no-auth>
    <p>你没有该权限</p>
  </template>
</Auth>

<!-- 多权限验证，用户必须具备全部权限，才验证通过 -->
<AuthAll :value="['department.create', 'department.edit']">
  <p>你有该权限</p>
  <template #no-auth>
    <p>你没有该权限</p>
  </template>
</AuthAll>

鉴权指令

对于单个元素，也提供了 v-auth 和 v-auth-all 鉴权指令，使用上对比鉴权组件更方便，当然它能做的事情也更简单。

<!-- 单权限验证 -->
<button v-auth="'department.create'">新增部门</button>

<!-- 多权限验证，用户只要具备其中任何一个权限，则验证通过 -->
<button v-auth="['department.create', 'department.edit']">新增部门</button>

<!-- 多权限验证，用户必须具备全部权限，才验证通过 -->
<button v-auth-all="['department.create', 'department.edit']">新增部门</button>

鉴权函数

鉴权组件和鉴权指令控制的是页面上的元素，而鉴权函数则更多是使用在业务流程代码里的权限判断。

import useAuth from '@/utils/composables/useAuth'
const { auth, authAll } = useAuth()

// 单权限验证，返回 true 或 false
auth('department.create')

// 多权限验证，用户只要具备其中任何一个权限，则验证通过，返回 true 或 false
auth(['department.create', 'department.edit'])

// 多权限验证，用户必须具备全部权限，才验证通过，返回 true 或 false
authAll(['department.create', 'department.edit'])