Vue：限制具有某些角色的用户可以访问路由器 vue-element-admin 中的某些页面答案

【问题标题】：Vue: Limiting users with certain roles have access to certain pages in the router vue-element-adminVue：限制具有某些角色的用户可以访问路由器 vue-element-admin 中的某些页面
【发布时间】：2019-09-02 09:36:48
【问题描述】：

我正在使用 vue-admin-template，可以在这里看到：https://github.com/PanJiaChen/vue-admin-template。

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

<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 },

vue-admin-template 有一个路由器系统，它在侧面菜单中列出了您可以访问的所有页面，如下所示：

export const constantRoutes = [
{
    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
      }
    ]
  }
}

很遗憾，如果用户没有管理员名册，他/她仍然可以看到访问此页面。

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

我不清楚，但有 2 个 const 区域可以添加路线：

常量路由和异步路由

如果您想使用用户角色来确定他们可以看到什么，您的条目必须在 asyncRoutes

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
      }
    ]
  }
}```

【讨论】：