页面级权限控制方案-动态路由

通过动态路由控制页面级权限，不同权限的用户访问路由不一样

什么是动态路由？

即是根据用户的权限不同，动态生成路由规则的可访问路由。

为什么要使用动态路由？

一、原因：

1. 后台管理系统通常都有多种角色存在，每种角色都有不同的权限；
2. 根据用户的权限不同，动态生成路由规则，可以让每个用户看到不同的导航菜单。

二、需求：

1. 用户权限不同，看到的导航菜单也不同；
2. 用户直接输入url路径试图访问没有权限或不存在的页面将会跳转到404页面；

三、主要利用到的技术

router.addRoutes，可动态添加路由规则

动态路由的实现？

一、思路

1. 路由文件包含全部路由（分为公共基础路由publicRouter与导航路由navRouter）、并有权限字段设置；
2. 登录获取到权限表authorities，根据权限表与路由权限字段authority匹配，匹配的路由处理为新路由规则addRouters；
3. 新的路由规则添加到router中；
4. 根据新的路由规则渲染导航菜单。

二、路由文件router.js的设置

1. 路由文件分割为公共基础路由publicRouter跟导航路由navRoute
   
   publicRouter为基础路由，与权限无关，每个用户都含有。通常包括：根路径（/）设置、home路由与登录路由。
   
   navRouter为动态导航路由，包含全部与权限控制相关的路由，显示在导航菜单栏。
   
   注：404路由虽然为公共路由，但需要放到路由规则的最后面。
2. 具体代码如下

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/views/home/index.vue'
import Login from '@/views/login/index.vue'
import Error404 from '@/views/error/404'

// 布局页面
import Layout from '@/components/layout/index.vue'

Vue.use(Router)

// 欢迎页
const Welcome = () => import('@/views/welcome/welcome.vue')
// demo
const DemoCard = () => import('@/views/demo/card.vue')
// 运营总览
const Survey = () => import('@/views/survey/survey.vue')

// 公共基础路由
export const publicRouter = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

export default new Router({
  auth: true,
  routes: publicRouter
})

/*
* 动态nav路由, 显示在菜单栏
* icon: 路由icon图标
* authority: 访问路由所需权限, Array
* keepAlivePath: 菜单栏高亮路由
* hide: 是否隐藏子路由
*/
export const navRouter = [
  {
    path: '/welcome',
    redirect: '/welcome',
    component: Layout,
    meta: {
      icon: 'iconfont icon-zhuye'
      // authority: [''],
      // keepAlivePath: '/welcome'
    },
    children: [
      {
        path: '',
        name: 'Welcome',
        component: Welcome,
        meta: {
          title: '欢迎'
          // hide: false
        }
      }
    ]
  },
  {
    path: '/demo',
    redirect: '/demo/card',
    component: Layout,
    meta: {
      title: '组件',
      icon: 'iconfont icon-shebeidilifenbu',
      children: true
    },
    children: [
      {
        path: 'card',
        name: 'DemoCard',
        component: DemoCard,
        meta: { title: '卡片组件' }
      }
    ]
  },
  {
    path: '/survey',
    redirect: '/survey',
    component: Layout,
    meta: {
      icon: 'iconfont icon-baobiaotongji'
    },
    children: [
      {
        path: '',
        name: 'Survey',
        component: Survey,
        meta: {
          title: '运营总览'
        }
      }
    ]
  },
  {
    path: '*',
    redirect: '/404',
    component: Layout,
    meta: {
      icon: '',
      hide: true
    },
    children: [
      {
        path: '',
        name: 'Error404',
        meta: {
          title: '404页面'
        },
        component: Error404
      }
    ]
  }
]

三、vuex管理的路由模块route.js的设置

1. route.js是匹配路由规则，生成动态路由的文件。
   
   生成的全部路由将会被addRoutes到router中，并会在导航菜单渲染中使用
2. 具体代码如下

import { navRouter, publicRouter } from '@/router/index'

// 判断是否有权限
function hasPermission (roles, route) {
  if (route.meta && route.meta.authority) {
    return roles.some(role => route.meta.authority.includes(role))
  } else {
    return true
  }
}

// 过滤路由
function filterAsyncRouter (navRouter, roles) {
  const accessedRouters = navRouter.filter(route => {
    if (hasPermission(roles, route)) {
      if (route.children && route.children.length > 0) {
        route.children = filterAsyncRouter(route.children, roles)
        if (route.redirect && route.children[0].path) {
          route.redirect = route.path + '/' + route.children[0].path
        }
      }
      return true
    }
    return false
  })
  return accessedRouters
}

const route = {
  state: {
    addRouters: [], // 动态路由
    routers: [] // 全部路由
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = publicRouter.concat(routers)
    }
  },
  actions: {
    GenerateRoutes: ({ commit }, { data }) => {
      return new Promise(resolve => {
        let accessedRouters = filterAsyncRouter(navRouter, data)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    }
  }
}

export default route

3、为了方便调用，也是放到vuex的getters中

const getters = {
  // token
  token: ({ user }) => user.token,
  // 权限表
  authorities: ({ user }) => user.authorities,
  // 用户信息
  userInfo: ({ user }) => user.userInfo || {},
  // 动态路由
  addRouters: ({ route }) => route.addRouters
}

export default getters

四、全局路由拦截permission.js的设置

1. 该拦截可实现登录后与强制刷新浏览器都会重新获取self接口，重新设置动态路由。
   
   在此处，需要把匹配好的动态路由通过addRouters添加到router中。
2. 具体代码如下

import router from '@/router/index'
import store from '@/store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import { Message } from 'element-ui'
import { getToken, removeToken } from '@/assets/utils/auth' // 验权

const whiteList = ['/login'] // 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start()
  let remember = JSON.parse(getToken(true))
  let token = getToken(false, remember)
  if (token) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store && store.getters.addRouters.length === 0) {
        store.dispatch('GetInfo').then(res => { // 拉取用户信息
          let data = store.getters.authorities
          store.dispatch('GenerateRoutes', { data }).then(() => { // 根据roles权限生成可访问的路由表
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            if (data && data.length > 0) {
              next({ ...to, replace: true })
            } else {
              Message.error('账号异常')
              removeToken()
            }
          })
        }).catch(() => {
          store.dispatch('LogOut').then(() => {
            next({ path: '/login' })
          })
        })
      } else {
        next()
        NProgress.done()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done() // 结束Progress
})

五、home页的设置

目的：

1. home页作为登录后的loading页；
2. 根路径会默认重定向到该页面；
3. 进入到home页后，会跳转到动态路由的第一个路由页面。
   具体代码如下：

<template lang="pug">
  .home-page
    i.el-icon-loading
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'Home',
  data () {
    return {}
  },
  computed: {
    ...mapState(['route'])
  },
  mounted () {
    let toRouter = this.route.addRouters[0].path
    this.$router.push(toRouter)
  },
  methods: {}
}
</script>
<style lang="scss">
.home-page{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  color: $success;
  background: url('~@/assets/images/login-bg.png') no-repeat center center / cover;
}
</style>

六、导航菜单的设置：

1. 导航菜单利用element-ui的el-menu组件实现；
   
   主要需要考虑的是菜单栏的高亮问题，强制刷新浏览器，登录后第一次进入，切花页面。高亮状态的保持与更替需要有仔细的考虑与验证。
2. 具体代码如下：

<template lang="pug">
  .app-nav
    el-menu(ref="navMenu",:default-active="activeIndex", mode="horizontal", @open="handleOpen", @close="handleClose",
      @select="selectHandle", :unique-opened="true", :collapse-transition="false")
      template(v-for="item in list", v-if="item.show")
        el-menu-item(v-if="!item.children", :index="item.path")
          i(:class="item.icon")
          span(slot="title") {{item.title}}
        el-submenu(v-else, :index="item.path", :popper-append-to-body="false", ref="submenu", popper-class="hekr-submenu",
          :hide-timeout="0", :show-timeout="0")
          template(slot="title")
            i(:class="item.icon")
            span(slot="title") {{item.title}}
          template(v-for="sub in item.subList")
            el-menu-item(:index="sub.path", v-show="sub.show")
              i(:class="sub.icon")
              span {{sub.title}}
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: 'AppNav',
  data () {
    return {
      activeIndex: this.defaultActiveIndex
    }
  },
  computed: {
    ...mapState(['user', 'route']),
    defaultActiveIndex () {
      return this.$route.meta.keepAlivePath ? this.$route.meta.keepAlivePath : this.$route.path
    },
    list () {
      let router = this.route.addRouters
      return router.map(r => {
        let path = r.redirect
        let icon = r.meta.icon
        let title = r.meta.title || r.children[0].meta.title
        let children = r.meta.children
        let subList = []
        let show = !r.meta.hide
        if (children) {
          r.children.map(s => {
            subList.push({
              path: `${r.path}/${s.path}`,
              icon: s.meta.icon,
              title: s.meta.title,
              show: !s.meta.hide
            })
          })
        }
        return {path, icon, title, children, show, subList }
      })
    }
  },
  mounted () {
    this.activeIndex = this.defaultActiveIndex
  },
  watch: {
    '$route' (to, from) {
      this.activeIndex = this.defaultActiveIndex
    }
  },
  methods: {
    handleOpen (index, path) {
      this.$nextTick(() => {
        this.$router.push(index)
        this.$refs.navMenu.activeIndex = index
        this.closeSubmenu(index)
      })
    },
    handleClose (index, path) {
      this.closeSubmenu(index)
    },
    selectHandle (index, path) {
      if (index !== this.$route.path) {
        this.$nextTick(() => {
          this.$router.push(index)
          this.closeSubmenu(index)
        })
      }
    },
    // 关闭子菜单
    closeSubmenu (index) {
      this.$refs.navMenu.close(index)
    }
  }
}
</script>
<style lang="scss">
</style>