基于Vue实现后台系统权限控制

基于Vue.js 2.x系列 + Element UI 的后台系统权限控制

前言：关于vue权限路由的那些事儿……

菜单类型

菜单类型代码页面资源的类型。类型包括，0：目录 1：菜单 2：按钮’。

权限标识

权限标识即是代表此页面资源，用来进行权限控制的唯一标识，主要是进行增删改查的权限控制。

权限标识包括，sys:user:add：新增 sys:user:edit：编辑 sys:user:delete：删除 sys:user:view：查看。

注：目前查看都可以通过菜单可见性进行控制，所以查看权限标识目前没有用上，如果需要显示无权限页面可以使用。

页面按钮控制

页面操作按钮提供权限标识，查询是否在用户权限标识集合中。
在：有权限，可见或可用，不在：无权限，不可见或禁用。

目前采用的是不可见。

项目背景:现有一个财务后台管理系统，共存在5种类型的人员

1.超级管理员 2.财务经理 3.财务会计 4.财务专员 5.员工

每种类型的人看到的操作栏并不一样，可以进行的操作也不尽相同，于是就需要程序处理一下各个权限问题。

过程说难不难，说简单不算简单

准备工作：上百度、Google，狂搜了好多关于权限的问题，也许是仁者见仁智者见智吧，五花八门的介绍让自己更加迷茫不堪，真心不知道从哪里下手：

1）让后端返回关于权限的json数据吧，但却不太懂这样的数据应该怎样处理；
2）在前端路由那里处理，可是不明白应该怎样使用何种属性来实现这个功能；

【最后】
最后看到一篇文章 手摸手，带你用vue撸后台 系列二(登录权限篇) vue-element-admin
，但是发现代码非常多权限功能是整合在框架里面的，伤心，我就想实现一个小小的权限功能，没办法还是仔细的研究了起来。

具体实现思路

1 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。

2 当用户登录后，获取用role，将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。

3 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。

4 使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。

是不是有点懵没关系下面我尽量用通俗点的话来讲每一步

1在路由router.js里面声明权限为admin的路由(异步挂载的路由asyncRouterMap)

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRouterMap = [
  {
   
    path: '/',
    redirect: '/login',
    hidden: true
  },
  {
   
    path: '/login',
    name: '登录页面',
    hidden: true,
    component: resolve => require(['../views/login/Login.vue'], resolve)