vue2实现动态路由权限

实现动态路由权限，需要进行以下步骤：

1. 在路由配置中设置meta属性，用于存储该路由需要的权限信息，例如：

{
  path: '/admin',
  name: 'Admin',
  component: Admin,
  meta: {
    requiresAuth: true,
    roles: ['admin']
  }
}

2. 在路由跳转前，判断用户是否有权限访问该路由，这可以在路由导航守卫中实现，例如：

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const currentUser = firebase.auth().currentUser

  if (requiresAuth && !currentUser) {
    next('/login')
  } else {
    const userRoles = getUserRoles(currentUser) // 从服务器获取当前用户的角色信息

    if (to.meta.roles.some(role => userRoles.includes(role))) {
      next()
    } else {
      next('/403')
    }
  }
})

在上面的代码中，我们首先检查该路由是否需要认证，如果需要，但用户未登录，则跳转到登录页面。如果用户已登录，则从服务器获取该用户的角色信息，并检查用户是否具有访问该路由的权限。如果用户有权限，则继续访问该路由，否则跳转到403页面。

3. 在获取用户角色信息的函数中，可以使用Vuex来保存角色信息，例如：

const store = new Vuex.Store({
  state: {
    userRoles: []
  },
  mutations: {
    setUserRoles(state, roles) {
      state.userRoles = roles
    }
  },
  actions: {
    fetchUserRoles(context) {
      // 从服务器获取用户角色信息，并调用mutations来更新state
      // ...
      context.commit('setUserRoles', roles)
    }
  }
})

在上面的代码中，我们定义了一个store来存储用户角色信息。在fetchUserRoles函数中，我们从服务器获取用户角色信息，并调用mutations来更新state。

以上就是实现动态路由权限的基本步骤。需要注意的是，在实际项目中，需要根据具体情况进行调整和优化，例如将角色信息缓存到本地，或者使用JWT令牌来验证身份等。