[分享]前端vue做权限

权限是指不同用户在系统中所拥有的操作权限不同，实现权限管理可以保证系统的安全性，Vue作为一种优秀的前端框架，可以方便地进行权限控制。Vue的权限控制可以分为两种方式：基于路由的控制和基于组件的控制。...

权限是指不同用户在系统中所拥有的操作权限不同，实现权限管理可以保证系统的安全性，Vue作为一种优秀的前端框架，可以方便地进行权限控制。

Vue的权限控制可以分为两种方式：基于路由的控制和基于组件的控制。基于路由的控制是在路由配置时进行权限控制，而基于组件的控制则是在组件渲染时进行权限判断。

基于路由的控制需要安装Vue-Router才能实现。在路由配置文件中，可以通过meta字段添加该路由的权限需求。例如，我们定义一个需要管理员权限才能访问的路由：

{
  path: '/admin',
  component: Admin,
  meta: {
    requiresAuth: true,
    requiresAdmin: true
  }
} 

这里定义了两个meta属性：requiresAuth表示需要登录后才能访问，requiresAdmin表示需要管理员权限才能访问。在路由跳转时，可以在router.beforeEach钩子中进行权限判断：

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

  if (requiresAuth && !auth.loggedIn()) {
    next('/login')
  } else if (requiresAdmin && !auth.isAdmin()) {
    next('/')
  } else {
    next()
  }
}) 

这段代码中，我们判断了该路由的meta属性，并通过自定义的auth模块进行了权限判断。如果用户未登录，我们则跳转到登录页面；如果用户权限不足，我们跳转到首页。如果都符合条件，则继续路由跳转。

基于组件的控制则更加灵活。我们可以在组件内部进行权限判断，根据用户权限动态渲染组件。例如，我们定义了一个需要管理员权限才能访问的组件：

<template>
  <div>
    <h1 v-if="isAdmin">Welcome Admin!</h1>
    <h1 v-else>Access Denied!</h1>
  </div>
</template>

<script>
export default {
  computed: {
    isAdmin() {
      return auth.isAdmin()
    }
  }
}
</script> 

这里使用了computed属性进行动态渲染。根据auth模块的isAdmin()方法，我们动态地渲染了组件内容。

总结起来，Vue的权限控制可以基于路由和组件进行实现。基于路由的控制更适用于全局权限控制，可以在路由钩子中进行判断。而基于组件的控制则更加灵活，可以根据不同的用户权限，在组件内部进行动态渲染。