vue实现权限路由

权限路由的实现思路

在Vue中实现权限路由的核心在于动态生成路由表，根据用户权限过滤或追加可访问的路由。通常结合Vue Router和状态管理工具（如Vuex或Pinia）完成。

基础实现步骤

定义静态路由和动态路由 将路由分为两部分：所有用户均可访问的基础路由（如登录页、404页）和需要权限的动态路由。

// router/index.js
export const constantRoutes = [
  { path: '/login', component: () => import('@/views/login') },
  { path: '/404', component: () => import('@/views/404') }
]

export const asyncRoutes = [
  { path: '/admin', component: () => import('@/views/admin'), meta: { roles: ['admin'] }},
  { path: '/editor', component: () => import('@/views/editor'), meta: { roles: ['editor'] }}
]

路由守卫校验权限 通过全局前置守卫进行权限验证，未登录用户跳转到登录页，已登录用户验证权限。

router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.path === '/login') {
    next()
  } else if (!hasToken) {
    next('/login')
  } else {
    if (hasPermission(to, userRoles)) {
      next()
    } else {
      next('/404')
    }
  }
})

function hasPermission(route, roles) {
  if (route.meta?.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  }
  return true
}

动态添加路由 用户登录后根据权限动态添加可访问的路由。使用router.addRoute方法实现。

// 在登录成功后调用
function generateRoutes(roles) {
  let accessedRoutes = asyncRoutes.filter(route => {
    if (route.meta?.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
  accessedRoutes.forEach(route => {
    router.addRoute(route)
  })
}

进阶优化方案

路由元信息配置 通过meta字段更灵活地控制权限，支持多角色、权限码等多种验证方式。

{
  path: '/dashboard',
  component: Dashboard,
  meta: {
    permissions: ['view_dashboard'],
    requiresAuth: true
  }
}

后端控制路由 更安全的做法是由后端返回用户可访问的路由表，前端根据返回数据动态生成路由。

// 从API获取权限路由
api.getUserRoutes().then(routes => {
  const formattedRoutes = formatRoutes(routes)
  formattedRoutes.forEach(route => {
    router.addRoute(route)
  })
})

缓存路由数据 将生成的路由数据存入Vuex或Pinia，避免每次刷新重新计算。

// store/modules/permission.js
state: {
  routes: [],
  addRoutes: []
},
mutations: {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

常见问题处理

页面刷新路由丢失 在应用初始化时重新获取用户权限并生成路由表。

// main.js
store.dispatch('user/getInfo').then(() => {
  store.dispatch('permission/generateRoutes')
})

路由重复添加 在添加路由前先重置路由，避免重复添加。

function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}

404页面处理 在路由最后添加404页面的捕获，确保未匹配路由的正确跳转。

router.addRoute({ path: '/:pathMatch(.*)', redirect: '/404' })

通过以上方法可以实现完整的Vue权限路由系统，根据项目需求选择适合的方案组合。实际开发中建议结合菜单生成、按钮权限等功能形成完整的权限管理体系。