vue2如何控制权限

在Vue2中控制权限可以通过以下几种方式来实现：1、路由守卫、2、指令、3、组件。接下来，我们将详细介绍其中的“路由守卫”方法。

路由守卫是一种用于在导航前进行权限验证的机制。通过在路由配置中添加守卫函数，可以在用户访问某个页面之前检查其权限，并根据检查结果决定是否允许访问。例如，可以通过beforeEach全局守卫来实现对所有路由的权限控制，在守卫函数中获取用户的权限信息，并与目标路由的权限要求进行比较，从而决定是否放行或重定向到其他页面。

一、路由守卫

1、全局前置守卫

router.beforeEach((to, from, next) => {
  // 获取用户权限信息
  const userRole = store.state.user.role;
  // 检查目标路由是否需要权限
  if (to.meta && to.meta.requiresAuth) {
    // 检查用户是否有权限
    if (to.meta.roles.includes(userRole)) {
      next(); // 有权限，放行
    } else {
      next('/unauthorized'); // 无权限，重定向到未授权页面
    }
  } else {
    next(); // 不需要权限，放行
  }
});

2、路由元信息

在路由配置中添加元信息，用于指定某个路由是否需要权限及所需的角色。

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    meta: {
      requiresAuth: true,
      roles: ['admin']
    }
  },
  {
    path: '/user',
    component: UserComponent,
    meta: {
      requiresAuth: true,
      roles: ['user', 'admin']
    }
  },
  {
    path: '/unauthorized',
    component: UnauthorizedComponent
  }
];

二、指令

1、定义自定义指令

Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const userRole = store.state.user.role;
    const requiredRoles = binding.value;
    if (!requiredRoles.includes(userRole)) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});

2、使用自定义指令

在模板中使用自定义指令来控制元素的显示。

<button v-permission="['admin']">Admin Only</button>
<button v-permission="['user', 'admin']">User and Admin</button>

三、组件

1、创建权限组件

Vue.component('Permission', {
  props: {
    roles: {
      type: Array,
      required: true
    }
  },
  computed: {
    hasPermission() {
      const userRole = store.state.user.role;
      return this.roles.includes(userRole);
    }
  },
  render(h) {
    if (this.hasPermission) {
      return this.$slots.default;
    }
    return null;
  }
});

2、使用权限组件

在模板中使用权限组件来包裹需要控制权限的内容。

<Permission :roles="['admin']">
  <button>Admin Only</button>
</Permission>
<Permission :roles="['user', 'admin']">
  <button>User and Admin</button>
</Permission>

四、结合Vuex进行权限管理

1、定义Vuex状态

在Vuex中定义用户的权限信息。

const store = new Vuex.Store({
  state: {
    user: {
      role: 'guest'
    }
  },
  mutations: {
    setUserRole(state, role) {
      state.user.role = role;
    }
  }
});

2、在路由守卫中使用Vuex状态

在路由守卫中获取Vuex中的权限信息。

router.beforeEach((to, from, next) => {
  const userRole = store.state.user.role;
  if (to.meta && to.meta.requiresAuth) {
    if (to.meta.roles.includes(userRole)) {
      next();
    } else {
      next('/unauthorized');
    }
  } else {
    next();
  }
});

五、后台接口权限控制

1、前端请求接口时附带权限信息

在前端请求时附带用户的权限信息。

axios.get('/api/some-endpoint', {
  headers: {
    Authorization: `Bearer ${store.state.user.token}`
  }
});

2、后端验证权限

在后端验证用户的权限信息，决定是否返回数据。

app.get('/api/some-endpoint', (req, res) => {
  const userRole = getUserRoleFromToken(req.headers.authorization);
  if (userRole === 'admin') {
    res.json({ data: 'some data' });
  } else {
    res.status(403).json({ message: 'Forbidden' });
  }
});

总结：

通过以上方法，Vue2可以实现灵活的权限控制。根据具体需求，可以选择使用路由守卫、自定义指令、权限组件或结合Vuex进行权限管理。此外，前端和后端结合进行权限验证，可以确保系统的安全性和可靠性。建议根据实际项目情况，选择合适的方法进行权限控制，并定期进行权限审查和优化，以确保系统的安全性和可维护性。