前端登录，权限验证——vue-simple-login

文章目录

• 前言
• 一、菜单介绍
• • 1、单层菜单
  • 2、多层菜单
• 二、路由meta介绍

---

前言

本项目放在了github，直接拉取即可查看。

github地址：https://github.com/du-ding/vue-simple-login
git求star ~ 求star ~ 求star ~

基于vue实现一个前端的系统架构，用户仅仅配置路由表即可实现：
1、根据用户权限添加不同的路由，展示可访问的菜单。
2、菜单可以根据页面内容动态变化。
3、系统内实现一个tabs标签，用于记录访问过的页面。
4、管理员可以设置用户权限，限制用户访问那些菜单。

三个账号，信息如下：

用户名	密码
admin	admin
user1	user1
user2	user2

一、菜单介绍

路由配置表文件均在目录src/router/modules下

1、单层菜单

单层路由生成的菜单没有子菜单，路由配置如下，仅有一个children。

vue-simple-login\src\router\modules\homePage.js
/**
 * 首页路由
 * @Author:duding
 */
export default {
  path: "/home",
  name: 'home',
  component: () => import("@/Layout/index.vue"),
  redirect: '/home/index', //重定向到children
  children: [
    {
      path: "/home/index",
      name: "homeIndex",
      meta: {
        authority: 'home',
        title: '首页',
        icon: 'area-chart',
        level: 0,
        keepAlive: true
      },
      component: () => import("@/views/home/index.vue"),
    }
  ]
}

2、多层菜单

多层路由生成的菜单有子菜单，父路由下有多个children路由，路由配置如下。
代码如下（示例）：

  {
    path: "/system",
    component: () => import("@/Layout/index.vue"),
    //对于有多个children的路由，不需要设置meta，校验权限时会根据children的meta校验。
    meta: {
      title: '系统管理',
      icon: 'setting',
    },
    children: [
      {
        path: "/system/authority",
        name: "authority",
        meta: {
          authority: 'authority',
          title: '权限管理',
          icon: 'deployment-unit',
          level: 0
        },
        component: () => import("@/views/system/authority/index.vue"),
      },
      {
        path: "/system/user",
        name: "user",
        meta: {
          authority: 'user',
          title: '用户管理',
          icon: 'user',
          level: 0
        },
        component: () => import("@/views/system/user/index.vue"),
      },
      {
        path: "/system/role",
        name: "role",
        meta: {
          authority: 'role',
          title: '角色管理',
          icon: 'smile',
          level: 0,
        },
        component: () => import("@/views/system/role/index.vue"),
      },

      {
        path: "/system/params",
        name: "params",
        meta: {
          authority: 'params',
          title: '参数管理',
          icon: 'pie-chart',
          level: 0
        },
        component: () => import("@/views/home/index.vue"),
      },
      {
        path: "/system/job",
        name: "job",
        meta: {
          title: '岗位管理',
          icon: 'heat-map',
        },
        component: () => import("@/views/system/job/index.vue"), //对于三级路由，必须加一个父组件
        children: [
          {
            path: '/system/job/job1',
            name: "job1",
            meta: {
              authority: 'job1',
              title: '岗位1管理',
              icon: 'pie-chart',
              level: 0
            },
            component: () => import("@/views/system/job/job1.vue"),
          },
          {
            path: '/system/job/job2',
            name: "job2",
            meta: {
              authority: 'job2',
              title: '岗位2管理',
              icon: 'pie-chart',
              level: 0
            },
            component: () => import("@/views/system/job/job2.vue"),
          }
        ],
      }
    ]
  }

二、路由meta介绍

authority:路由的权限，建议与路由name一致。

title: 路由名称

icon: 路由图标

level: 路由层级
如果菜单想随着你的页面内容动态变化，同时展示的路由level必须一致，本例中展示在主页的路由level都是0。点击产品管理后菜单对应的路由level都是1。

/**
 * 第二组路由，产品管理相关，level都为1
 * @Author:duding
 */
export default {
  path: "/mould",
  name: 'mould',
  component: () => import("@/Layout/index.vue"),
  meta: {
    title: '零件管理',
    icon: 'pie-chart',
  },
  children: [
    {
      path: "/mould/A",
      name: "mouldA",
      meta: {
        authority: 'mouldA',
        title: 'A部分',
        icon: 'pie-chart',
        level: 1
      },
      component: () => import("@/views/product/detail/mould/A.vue"),
    },
    {
      path: "/mould/B",
      name: "mouldB",
      meta: {
        authority: 'mouldB',
        title: 'B部分',
        icon: 'pie-chart',
        level: 1
      },
      component: () => import("@/views/product/detail/mould/B.vue"),
    }
  ]
}