vue动态路由配置记录

秒速五厘米 2022-05-11 09:16 282阅读 0赞

app中权限permission.js

import router from './router'
    import store from './store'
    import NProgress from 'nprogress' // Progress 进度条
    import 'nprogress/nprogress.css'// Progress 进度条样式
    // import { Message } from 'element-ui'
    // import { getToken } from '@/utils/auth' // 验权
    // import globalData from '@/utils/globalData'
    
    const whiteList = ['/login'] // 不重定向白名单
    let registerRouteFresh = true // 解决路由刷新失效问题
    router.beforeEach((to, from, next) => {
      NProgress.start()
      // sid判断是否登录
      const sid = store.getters.sid
      console.log('sid = ' + sid)
      if (sid) {
        if (to.path === '/login') {
          next({ path: '/' })
          NProgress.done() // if current page is dashboard will not trigger	afterEach hook, so manually handle it
        } else {
          if (registerRouteFresh) {
          	// 获取的角色
            const roles = JSON.parse(sessionStorage.getItem('roles'))
            store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
              router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
              registerRouteFresh = false
              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
              // next()
            })
          } else {
            next()
          }
        }
      } else {
        if (whiteList.indexOf(to.path) !== -1) {
          next()
        } else {
          // next('/login')
          next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
          NProgress.done()
        }
      }
    })
    
    router.afterEach(() => {
      NProgress.done() // 结束Progress
    })

store中权限permission.js

import { asyncRouterMap, constantRouterMap } from '@/router'
    
    /**
     * 通过meta.role判断是否与当前用户权限匹配
     * @param roles
     * @param route
     */
    function hasPermission(roles, route) {
      if (route.meta && route.meta.roles) {
        return roles.some(role => route.meta.roles.indexOf(role) >= 0)
      } else {
        return true
      }
    }
    
    /**
     * 递归过滤异步路由表，返回符合用户角色权限的路由表
     * @param asyncRouterMap
     * @param roles
     */
    function filterAsyncRouter(asyncRouterMap, roles) {
      const accessedRouters = asyncRouterMap.filter(route => {
        if (hasPermission(roles, route)) {
          if (route.children && route.children.length) {
            route.children = filterAsyncRouter(route.children, roles)
          }
          return true
        }
        return false
      })
      return accessedRouters
    }
    
    const permission = {
      state: {
        routers: constantRouterMap,
        addRouters: []
      },
      mutations: {
        SET_ROUTERS: (state, routers) => {
          console.log(routers)
          state.addRouters = routers
          state.routers = constantRouterMap.concat(routers)
        }
      },
      actions: {
        GenerateRoutes({ commit }, data) {
          return new Promise(resolve => {
            const { roles } = data
            let accessedRouters
            if (roles.indexOf('平台运维') >= 0) {
              accessedRouters = asyncRouterMap
              console.log(accessedRouters)
            } else {
              accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
            }
            commit('SET_ROUTERS', accessedRouters)
            resolve()
          })
        }
      }
    }
    
    export default permission

路由sidebar/index.vue

<template>
      <el-scrollbar wrapClass="scrollbar-wrapper">
        <el-menu
          mode="vertical"
          :show-timeout="200"
          :default-active="$route.path"
          :collapse="isCollapse"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
        >
          <sidebar-item :routes="routes"></sidebar-item>
        </el-menu>
      </el-scrollbar>
    </template>
    
    <script>
    import { mapGetters } from 'vuex'
    import SidebarItem from './SidebarItem'
    
    export default {
      components: { SidebarItem },
      computed: {
        ...mapGetters([
          'sidebar'
        ]),
        routes() {
          return this.$store.getters.permission_routers
        },
        isCollapse() {
          return !this.sidebar.opened
        }
      }
    }
    </script>

vuex  
getter.js

const getters = {
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      token: state => state.user.token,
      sid: state => state.user.sid || sessionStorage.getItem('sid'),
      avatar: state => state.user.avatar,
      realname: state => state.user.realname,
      username: state => state.user.username,
      password: state => state.user.password,
      roles: state => state.user.roles,
      workTypes: state => state.app.workTypes,
      permission_routers: state => state.permission.routers,
      addRouters: state => state.permission.addRouters
    }
    export default getters

store/index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    import app from './modules/app'
    import user from './modules/user'
    import permission from './modules/permission'
    import getters from './getters'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      modules: {
        app,
        user,
        permission
      },
      getters
    })
    
    export default store