RBAC权限设计笔记

概述：基于角色的权限设计，给角色分配权限，之后给用户分配角色，结合动态路由，设置路由表

给角色设置权限

给用户分配角色 

设置路由 

//静态路由表
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: 'Dashboard', icon: 'dashboard' }
      }
    ]
  },
  {
    path: '/excel',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '',
        component: () => import('@/views/excel')
      }
    ]
  }
  // 404 page must be placed at the end !!!
  // { path: '*', redirect: '/404', hidden: true }
]

//设置默认路由表
const createRouter = () => {
  const routes = new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    // routes: [...constantRoutes, ...asyncRoutes]
    routes: [...constantRoutes]
  })
  return routes
}

const router = createRouter()
//路由重置方法
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

设置动态路由表

// 动态路由项
import approvalsRouter from './modules/approvals'
import settingRouter from './modules/setting'
import attendancesRouter from './modules/attendances'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import salarysRouter from './modules/salarys'
import socialRouter from './modules/social'

// 动态路由表
export const asyncRoutes = [
  departmentsRouter,
  settingRouter,
  employeesRouter,
  permissionRouter,
  approvalsRouter,
  attendancesRouter,
  salarysRouter,
  socialRouter
]

//路由项之setting--
import Layout from '@/layout'
export default {
  path: '/settings', // 角色设置
  component: Layout,
  children: [
    {
      path: '',
      name: 'Settings',
      component: () => import('@/views/setting'),
      meta: { title: '角色设置', icon: 'setting' }
    }
  ]
}

在路由守卫中进行动态路由项添加

……略
router.beforeEach(async (to, from, next) => {
  nProgress.start()
  const token = store.getters.token
  if (token) {
    // console.log(to.path)
    if (to.path === '/login') {
      next('/')
      nProgress.done()
    } else {
      if (!store.getters.name) {
        const menus = await store.dispatch('user/getUserInfoActions')    //开始
获取到用户拥有的路由信息
        // 根据用户角色设置路由表
        const filterRoutes = asyncRoutes.filter((route) => {
          const routeName = route.children[0].name.toLowerCase()
          return menus.includes(routeName)
        })
        console.log('filterRoutes', filterRoutes)
        router.addRoutes(filterRoutes)
        // 最后再添加404,否则会存在刷新页面跳转404页的问题
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        // router.addRoutes(asyncRoutes)
        // 将用户路由表保存在vuex中，达到响应式效果，渲染侧边栏也使用vuex中的数据
        store.commit('permission/setRoutes', filterRoutes)  //结束
        next({
          path: to.path,
          replace: true
        })
      }
      next()
……略