时间戳

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

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

问题描述

我正在使用可以在这里看到的 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.jsvue-component

解决方案

我不清楚，但可以将路线添加到 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
      }
    ]
  }
}```

推荐阅读