Vue.js Vue：限制具有特定角色的用户访问路由器Vue元素管理中的特定页面

我正在使用可以在此处看到的vue管理模板：

我有一个基于权限的系统，允许您根据用户的角色限制其访问权限。我可以通过在页面中添加以下代码来限制用户看到的内容：

<template>
  <div v-permission="['admin']">
    <h1>You are the admin</h1>
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js'

export default {
  name: 'ThePage',
  directives: { permission },

---

不幸的是，如果用户没有管理员名册，他/她仍然可以访问此页面。

我不清楚，但有两个常量区域可以添加路由：

君士坦丁堡 和 异步路由

如果您想使用用户角色来确定他们可以看到什么，您的条目必须位于异步路由中

export const asyncRoutes = [
{
    path: '/test1',
    component: Layout,
    redirect: '/',
    name: 'Test',
    alwaysShow: false,
    hidden: true,
    meta: { roles: ['admin'], title: 'Test', icon: 'example' },
    children: [
      {
        path: 'inside',
        props: true,
        name: 'Inside',
        component: () => import('@/views/test/index'),
        meta: { title: 'Inside', icon: 'peoples' },
        hidden: true
      }
    ]
  }
}```

export const asyncRoutes = [
{
    path: '/test1',
    component: Layout,
    redirect: '/',
    name: 'Test',
    alwaysShow: false,
    hidden: true,
    meta: { roles: ['admin'], title: 'Test', icon: 'example' },
    children: [
      {
        path: 'inside',
        props: true,
        name: 'Inside',
        component: () => import('@/views/test/index'),
        meta: { title: 'Inside', icon: 'peoples' },
        hidden: true
      }
    ]
  }
}```