基于Vue2.0实现后台系统权限控制

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

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

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

①超级管理员（称做admin），②普通用户（称做editor）

每种类型的人看到的操做栏并不同，能够进行的操做也不尽相同，因而就须要程序处理一下各个权限问题。

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

【迷茫的前期】

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

1）让后端返回关于权限的json数据吧，但却不太懂这样的数据应该怎样处理；

2）在前端路由那里处理，但是不明白应该怎样使用何种属性来实现这个功能；

【最后】

最后看到一篇文章 手摸手，带你用vue撸后台 系列二(登陆权限篇) ，可是发现代码很是多权限功能是整合在框架里面的，伤心，我就想实现一个小小的权限功能，没办法仍是得仔细研究做者的代码。

具体实现思路

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)
  },
  {
    path: '/Readme',
    // name: 'Readmehome',
    index: 'Readme',
    meta: {
      title: 'Readme',
      icon: 'el-icon-menu'
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'Readme',
        path: '/',
        meta: { title: 'Readme', icon: 'el-icon-menu' },
        component: resolve => require(['../components/page/Readme.vue'], resolve)
      }
    ]
  }
]

export default new Router({
  routes: constantRouterMap
})
// 异步挂载的路由
// 动态须要根据权限加载的路由表
export const asyncRouterMap = [
  {
    path: '/permission',
    // name: 'permissionhome',
    meta: {
      title: 'permission',
      icon: 'el-icon-setting',
      roles: ['admin']
    },
    component: resolve => require(['../components/common/Home.vue'], resolve),
    children: [
      {
        name: 'permission',
        path: '/permission',
        meta: {
          title: 'permission', icon: 'el-icon-menu', roles: ['admin']
        },
        component: resolve => require(['../components/page/permission.vue'], resolve)
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

复制代码

这里咱们根据 vue-router官方推荐 的方法经过meta标签来标示改页面能访问的权限有哪些。如meta: { role: ['admin','super_editor'] }表示该页面只有admin和超级编辑才能有资格进入。

注意事项：这里有一个须要很是注意的地方就是 404 页面必定要最后加载，若是放在constantRouterMap一同声明了404，后面的因此页面都会被拦截到404，详细的问题见addRoutes when you've got a wildcard route for 404s does not work

2当用户登陆后，获取用role，将role和路由表每一个页面的须要的权限做比较，调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由，生成最终用户可访问的路由表。路由表存在vuex里面

permission.js

// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 验权

const whiteList = ['/login', '/authredirect'] // 不重定向白名单

router.beforeEach((to, from, next) => {
  if (getToken()) { // 判断是否有token
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.roles.length === 0) {
        console.log('roles====0')
        store.dispatch('GetInfo').then(res => { // 拉取用户信息
          const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
          console.log('roles?', roles)
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
            console.log('addrouters', store.getters.addRouters)
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(() => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('验证失败,请从新登陆')
            next({ path: '/login' })
          })
        })
      } else {
        console.log('====1')
        next() // 当有用户权限的时候，说明全部可访问路由已生成 如访问没权限的全面会自动进入404页面
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})


复制代码

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

最后预览连接

vue实现的权限系统

前端学习大佬群493671066，美女多多。快上车，来不及解释了。

源码下载

vue实现的权限控制源码下载

打赏 衷心的表示感谢

最后若有不对的麻烦指正