vue antd router实现路径权限控制

如果你在使用 Vue、Ant Design Vue 和 Vue Router，可以通过路由守卫实现路径权限控制。以下是一种实现方式：

首先，在路由配置文件中，给每个路由对象添加一个 `meta` 属性，用于存储该路由需要的权限信息，例如：

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/',
    component: Home,
    meta: {
      requiresAuth: true // 需要登录才能访问
    },
    children: [
      {
        path: 'dashboard',
        component: Dashboard
      },
      {
        path: 'user',
        component: UserManagement,
        meta: {
          role: 'admin' // 需要管理员权限才能访问
        }
      }
    ]
  }
]

然后，在 Vue 实例中，使用 `router.beforeEach` 方法，对路由跳转进行拦截处理：

import router from './router'

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要登录才能访问
    if (!isLogin()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.role)) {
    // 需要特定角色才能访问
    if (hasRole(to.meta.role)) {
      next()
    } else {
      next({
        path: '/403'
      })
    }
  } else {
    next()
  }
})

在上述代码中，我们使用 `to.matched.some` 方法来判断当前路由是否需要登录或需要特定角色才能访问。如果需要登录，我们调用 `isLogin` 函数来判断用户是否已经登录；如果需要特定角色，我们调用 `hasRole` 函数来判断用户是否拥有该角色。如果判断不通过，我们使用 `next` 函数来跳转到登录页面、403 页面或其他页面。

需要注意的是，`isLogin` 和 `hasRole` 函数需要根据你的具体业务需求实现。