vue权限路由实现跳转

Vue权限路由实现跳转的方法

在Vue项目中实现权限路由跳转，通常需要结合路由守卫和动态路由添加技术。以下是几种常见的方法：

使用路由守卫进行权限控制

在路由跳转前通过全局前置守卫beforeEach进行权限验证：

router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token')
  if (to.meta.requiresAuth && !hasToken) {
    next('/login')
  } else {
    next()
  }
})

动态添加路由

根据用户权限动态添加可访问的路由：

// 假设后端返回的权限路由数据
const asyncRoutes = [
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    meta: { role: 'admin' }
  }
]

// 添加路由
function addRoutes() {
  const userRole = getUserRole() // 获取用户角色
  const allowedRoutes = asyncRoutes.filter(route => 
    route.meta.role.includes(userRole)
  )
  router.addRoutes(allowedRoutes)
}

使用Vuex管理权限状态

结合Vuex存储权限信息：

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

基于角色的权限控制

在路由配置中添加meta信息：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { roles: ['admin', 'editor'] }
  }
]

按钮级权限控制

创建自定义指令控制按钮显示：

Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding
    const roles = store.getters.roles

    if (value && !roles.some(role => value.includes(role))) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

404页面处理

添加通配符路由捕获未授权访问：

{
  path: '*',
  redirect: '/404',
  hidden: true
}

实现完整的权限路由系统需要前后端配合，前端负责路由控制和界面展示，后端提供权限数据接口。动态路由通常在用户登录后获取权限信息时添加，并配合路由守卫确保跳转安全。