Vuexy Admin comes with Permission control/Access Control to restrict unauthorized user from seeing private content. Check Demo .
Vuexy Admin带有权限控制/访问控制，以限制未经授权的用户查看私有内容。 这是demo。

Configuration 配置

Vuexy Admin uses vue-acl for access control. vue-acl help you to control the permission of access in your app for yours components and routes.
You can find configuration of vue-acl in src/acl/acl.js file.
Vuexy Admin使用vue-acl进行访问控制。 vue-acl帮助您控制应用程序中组件和路由的访问权限。
您可以在src/acl/acl.js文件中找到vue-acl的配置。

In the top of this file you will find some imports related to vue-acl and authentication.
在此文件的顶部，您将找到一些与vue-acl和身份验证有关的导入。

  1. import Vue from 'vue'
  2. import { AclInstaller, AclCreate, AclRule } from 'vue-acl'
  3. import router from '@/router'
  4. import firebase from 'firebase/app'
  6. firebase.auth().onAuthStateChanged(() => {
  7. ...
  8. }

Then we define acl settings and global rules.
然后定义acl设置和全局规则。

let initialRole = 'admin'
...

export default new AclCreate({
  initial: initialRole,
  notfound: '/pages/error-404',
  router,
  acceptLocalRules: true,
  globalRules: {
    admin: new AclRule('admin').generate(),
    editor: new AclRule('editor').or('admin').generate(),
  }
})


Admin: Admin have all permissions. 管理员拥有所有权限。
Editor:** Editor have some restrictions. E.g. Can not visit some routes, Can’t see private content. 编辑人员权限有一些限制。 例如。 无法访问某些路由，看不到私有内容。

Protecting Routes 路由保护

You can protect your routes by defining permission for your route in router.js file. You have to set meta rule property to defined rule in acl.js file.
您可以通过在router.js文件中定义路由权限来保护路由。 您必须将acl.js文件中的meta规则属性设置为已定义的规则。

{
    path: '/dashboard/analytics',
    name: 'dashboardAnalytics',
    component: () => import('./views/DashboardAnalytics.vue'),
    meta: {
        rule: 'editor'
    }
},

If editor try to visit route which is not meant for him, he will be redirected to notfound page as defined in acl.js file.
如果编辑者尝试访问不适合他的路由，那么他将被重定向到acl.js文件中定义的notfound的页面。

WARNING Sidebar item with no url will be always visible to user regradless of role 不论角色如何，没有网址的侧边栏项目始终对用户可见

WARNING We used > vue-acl library for providing ACL in our application. Creator of vue-acl rewritten whole code since 4.0.7(approx). Since then route protection is not working.So, we highly recommend till creator of that library don’t fix that bug, Please use > vue-acl@4.0.7 > 我们使用vue-acl库在我们的应用程序中提供ACL。 vue-acl的创建者从4.0.7（大约）起重写了整个代码。 从那时起，路由保护不起作用。>

Protecting Content/Components 保护内容/组件

To check whether user can see this content use v-if or v-show. You can use $acl.check('admin') to let user view content only if he/she is admin.
要检查用户是否可以看到此内容，请使用v-if或v-show。 您可以使用$ acl.check（’admin’）来让用户仅在其为管理员时查看内容。

<button v-if="$acl.check('admin')">
  Admin View
</button>
<button v-else>
  Editor View
</button>

Changing Roles 角色变更

You can change role of use on the fly using $acl.change('ROLE').
您可以使用$ acl.change（’ROLE’）即时更改使用角色。

<button v-if="$acl.not.check('admin')" @click="$acl.change('admin')">
  Set admin permisson
</button>
<button v-else @click="$acl.change('editor')">
  Set public permission
</button>

User Role - Managing with Vuex Store and LocalStorage 用户角色-使用Vuex Store和LocalStorage管理

You can get user’s current role using $acl.get[0]. Vuexy Admin also stores user role in localStorage and store’s state.
您可以使用$ acl.get [0]获取用户的当前角色。 Vuexy Admin还将用户角色存储在localStorage和存储状态中。

If you want to change user role use updateUserRole action which will update role in acl, localStorage and store. Please check updateUserRole for required parameter.
如果要更改用户角色，请使用updateUserRole操作，该操作将更新acl，localStorage和store中的角色。 请检查updateUserRole以获取必需的参数。

this.$store.dispatch('updateUserRole', {aclChangeRole: this.$acl.change, role: val})

Please check src/views/components/extra-components/AccessControlEditor.vue for reference.
请查看src/views/components/extra-components/AccessControlEditor.vue以供参考。

TIP updateUserRoleaction and relative mutation is updated for easy update of user details. updateUserRole操作和相对突变被更新，以便于用户详细信息的更新。