vue2做简单的权限管理

在Vue2中实现简单的权限管理可以采用路由守卫和动态路由的方式。

1. 定义路由表

首先需要在路由表中定义需要进行权限控制的路由，例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

其中，`meta`属性用于存储路由元数据，`requiresAuth`表示该路由需要进行权限控制，`roles`表示该路由需要的用户角色。

2. 定义路由守卫

在Vue中可以通过路由守卫来拦截路由跳转，并进行权限判断。例如：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断用户是否已登录
    if (!isAuthenticated) {
      next({ name: 'Login' })
      return
    }
    // 判断用户角色是否符合要求
    const roles = to.meta.roles
    if (roles && roles.length > 0) {
      const userRoles = JSON.parse(localStorage.getItem('roles'))
      if (!userRoles || !userRoles.some(role => roles.includes(role))) {
        next({ name: 'Home' })
        return
      }
    }
  }
  next()
})

在这个路由守卫中，我们首先判断该路由是否需要进行权限控制，如果需要则判断用户是否已登录。如果用户未登录，则跳转到登录页面；如果用户已登录，则判断用户角色是否符合要求。如果用户角色不符合要求，则跳转到主页。

3. 动态路由

在有些情况下，需要动态添加路由，例如在用户登录成功后根据用户角色动态生成路由。可以使用`router.addRoutes`方法动态添加路由。

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  // ...
})

export default router

// 在登录成功后根据用户角色动态生成路由
const userRoles = JSON.parse(localStorage.getItem('roles'))
const dynamicRoutes = []
if (userRoles.includes('admin')) {
  dynamicRoutes.push({
    path: '/admin',
    name: 'Admin',
    component: Admin
  })
}
router.addRoutes(dynamicRoutes)

在上面的代码中，我们首先获取用户角色，根据角色动态生成路由。然后使用`router.addRoutes`方法动态添加路由。注意，添加路由时必须使用异步方式，否则可能会出现路由无法匹配的问题。