权限控制

权限控制分两种，即整个页面具有权限控制，和页面中单个组件需要权限。

1.整个页面访问限制

整个页面的权限控制较为简单，你只需要在路由配置的meta中配置access字段即可，它是一个数组，如果你没有设置access字段，那么该页面是所有用户都可以访问的；如果你设置了该字段，那么只有该字段所设置的数组中包含的权限名称的用户可访问该页面。如下：

  1. {
  2.   path: '/page1',
  3.   name: 'page1',
  4.   component: Main,
  5.   meta: {
  6.     access: ['super_admin'] /*
  7.                              * 该页面只有权限值为super_admin的用户才能访问
  8.                              * 如果这级路由有子路由，则子路由也只有super_admin才能访问
  9.                              * 如果不设置此字段，则所有用户均可访问
  10.                              */
  11.   }
  12. }

2.单个组件浏览控制

如果你的一个页面上有多个组件，而不同的组件对于权限的要求又有所不同，那么，你可以使用如下方法给一个组件设置根据权限值配置它的可访问性：

  1. <template>
  2.   <div>
  3.     <component1 v-if="viewAccessAll"></component1>
  4.     <component2 v-if="viewAccessSuper"></component2>
  5.   </div>
  6. </template>
  7. <script>
  8. import { hasOneOf } from '@/libs/tools'
  9. export default {
  10.   name: 'page',
  11.   computed: {
  12.     access () {
  13.       return this.$store.state.user.access
  14.     },
  15.     viewAccessAll () {
  16.       return hasOneOf(['super_admin', 'admin'], this.access)
  17.     },
  18.     viewAccessSuper () {
  19.       return hasOneOf(['super_admin'], this.access)
  20.     }
  21.   }
  22. }
  23. </script>

上面的例子中，admin和super_admin权限的用户都可看到component1组件，而component2只有super_admin可以看到。

原文: https://lison16.github.io/iview-admin-doc/#/权限控制