权限设计

vue-router+pinia全局前置守卫配合后端返回路由Tree

const READ = 0b1
const CREATE = 0b10
const UPDATE = 0b100
const DELETE = 0b1000

let auth = READ | CREATE | UPDATE | DELETE

if ((auth & UPDATE) === UPDATE)
  console.log('update')

auth = auth ^ UPDATE
if ((auth & UPDATE) === UPDATE)
  console.log('update2')

服务端返回路由节点

权限功能 新增 修改 删除

{
  "path": "demo",
  "component": "demo/demo",
  "name": "Demo",
  "meta": {
    "title": "Demo", // 标题
    "icon": "i-demo", // 图标
    "noCache": true, // 是否缓存
    "affix": true, // 固定标签
    "addAccess": true, // 添加权限
    "editAccess": true, // 编辑权限
    "delAccess": true // 删除权限
  }
}

pinia

过滤后端返回的路由节点，过滤生成对应路由文件

// 路径为/views/文件夹name/*.vue
const modules = import.meta.glob('../views/**/*.vue')
// 后端过滤路由
export function getFilterRoutes(routes: any[]): any[] {
  // ...
  return list
}

通过vue-router 路由守卫

动态路由 addRoute 实现

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' })
  }
  else {
    permissionStore.addRouters.forEach((route) => {
      if (!route.children)
        router.addRoute('Root', route)
      else
        router.addRoute(route) // 动态添加可访问路由表
    })
    permissionStore.isAddRouters = true
    next()
  }
})