vue 权限管理动态路由

Vue.js 是一款前端 JavaScript 框架，它可以帮助开发者快速构建现代化的 Web 应用程序。在 Vue.js 中，动态路由是一种在运行时动态生成路由的方式，通常用于实现权限管理。

在 Vue.js 中，我们可以使用路由守卫来实现权限管理。路由守卫是在路由切换前或切换后执行的函数，我们可以在这些函数中检查用户是否有权限访问该路由。如果用户没有权限访问该路由，我们可以将其重定向到其他页面，或者显示一个错误页面。

下面是一个使用动态路由和路由守卫实现权限管理的示例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/admin',
      name: 'admin',
      component: () => import('@/views/Admin.vue'),
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login.vue')
    },
    {
      path: '*',
      name: 'notFound',
      component: () => import('@/views/NotFound.vue')
    }
  ]
})

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = localStorage.getItem('token')

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

在上面的代码中，我们定义了三个路由：home、admin 和 login。其中，admin 路由需要用户登录才能访问，因此我们在其 meta 中添加了 requiresAuth 属性。

在 router.beforeEach 函数中，我们检查用户是否已经登录，如果没有登录且要访问的路由需要登录，则将其重定向到登录页面。如果已经登录，则允许用户访问该路由。

在实际开发中，我们通常需要从后端获取用户的权限信息，并根据权限动态生成路由。这可以通过在路由守卫中动态添加路由来实现。具体实现可以参考 Vue.js 官方文档中的动态路由章节。