本文已参与「新人创作礼」活动，一起开启掘金创作之路
这篇文件介绍一下如何实现路由鉴权和按钮鉴权

路由鉴权

新建两个文件

新建/views/system/user/index.vue和/views/system/setting/index.vue用来展示路由鉴权的效果，内容如下

<template><h1>我是用户页面</h1></template>

<template><h1>我是设置页面</h1></template>

设置路由属性

如果要设置路由鉴权，需要提前设置该路由对应的权限是什么。这里需要用到vur-router里的meta来定义路由的权限信息。我在集成路由鉴权的时候发现有很多的博主喜欢在meta属性中定义能够访问路由的所有角色code数组，但是我们是不是可以将路由对应的权限设置为全局唯一的code，拥有该code就是拥有该路由。这样可以实现只判断后台返回的角色编码中是否有个编码和该路由的完全一致，就能知道是否有路由的权限
在src/router/index.ts中添加路由信息如下

  {
    path: '/system',
    redirect: '/system',
    component: LayOut,
    children: [
      {
        path: '/system/user',
        meta: { roleCode: 'system-user' },
        component: () => import(/* webpackChunkName: "system" */ '@/views/system/user/index.vue')
      },
      {
        path: '/system/setting',
        meta: { roleCode: 'system-setting' },
        component: () => import(/* webpackChunkName: "system" */ '@/views/system/setting/index.vue')
      }
    ]
  },

这里代表只要某个用户的权限码完全含有system-user即可访问/system/user页面

实现路由鉴权

我这里没有后端接口，先将获取用户权限码的逻辑写死，在src/router/index.ts导出router之前添加代码如下

const getRoleArr = (type) => {
  switch (type) {
    case 'Admin':
      return ['system-user', 'system-setting']
    case 'DeptAdmin':
      return ['system-user']
    case 'Common':
      return []
  }
}
router.beforeEach((to, _from, next) => {
  if (to.meta && to.meta.roleCode) {
    let needRoleCode = to.meta.roleCode as string
    if (getRoleArr('DeptAdmin')!.indexOf(needRoleCode) > -1) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

这里可以看到，在每次切换路由之前，都获取路由的角色码和当前用户的角色码对比，如果含有该路由的角色码，执行next(),如果没有的话，直接跳转到登录页面

页面按钮鉴权

按钮鉴权的方法就更简单了，先把user/index.vue补充一下代码如下

<template>
  <el-button v-if="showButton('system_user:add')">增 </el-button>
  <el-button v-if="showButton('system_user:del')">删</el-button>
  <el-button v-if="showButton('system_user:update')">改</el-button>
  <el-button v-if="showButton('system_user:search')">查</el-button>
  <h1>我是用戶页面</h1>
</template>
<script setup lang="ts">
import { showButton } from '@/utils/permission/hasPermission'
</script>

然后在/src/utils/permission文件夹下新建hasPermission.ts，代码如下

const getRoleArr = (type) => {
  switch (type) {
    case 'Admin':
      return ['system_user:add', 'system_user:update', 'system_user:search', 'system_user:del']
    case 'DeptAdmin':
      return ['system_user:add', 'system_user:update', 'system_user:search']
    case 'Common':
      return []
  }
}
export const showButton = (buttonRoleCode: string) => {
  return getRoleArr('DeptAdmin')!.indexOf(buttonRoleCode) > -1
}

这样就会只有Admin会显示用户管理页面的所有按钮，DeptAdmin不能跳转设置页面，普通用户不能跳转系统管理下的所有页面

结语

• 这里只实现了路由鉴权，但是普通用户还是能看到路由，准备优化为根据router封装menu
• 昨天想集成低代码平台，但是发现k-form-design貌似不支持vue3，这里先鸽了 欢迎关注我的掘金账号:juejin.cn/user/261290…
  欢迎star我的git项目:gitee.com/liangminghu…
  下期预告:老是基于写死的数据开发很不方便，准备开始搞一个api接口（本人主要开发java，准备先暂时搭建一个spring boot的项目）。