vue中如何设置权限管理

在Vue中设置权限管理通常分为以下几个步骤：

1. 定义路由表：在路由表中定义每个路由的meta属性，用来标识该路由需要的权限等级。

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    meta: { requiresAuth: false }
  }
]

在上述代码中，需要登录的路由设置了requiresAuth属性为true，不需要登录的路由则为false。

2. 创建一个全局的导航守卫：在导航守卫中判断用户是否有访问该路由的权限，如果没有则重定向到登录页。

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();
  }
});

在上述代码中，使用matched属性来获取当前路由和它的父路由（如果有）的所有meta属性，然后判断requiresAuth是否为true，如果是则判断用户是否已经登录，如果没有则重定向到登录页。

3. 在登录成功后将token保存到localStorage中，以便后续的路由守卫判断。

axios.post('/api/login', { username, password })
  .then(response => {
    localStorage.setItem('token', response.data.token);
  })
  .catch(error => console.log(error));

通过以上三个步骤，就可以在Vue中实现简单的权限管理了。当用户访问需要登录才能访问的路由时，如果用户没有登录，则会被重定向到登录页，否则就可以访问该路由。